/* Sobre de Recuerdos · OTGODigital — estilos compartidos */
:root{
  color-scheme:light;
  --papel:#f3e9dc;
  --papel-2:#ebdccb;
  --crema:#fbf6ee;
  --rosa:#d9a5a0;
  --rosa-2:#e8c3bd;
  --vino:#6e1f2e;
  --vino-2:#8c2b3c;
  --vino-osc:#4a1320;
  --tinta:#3a2226;
  --tinta-suave:#634649;
  --linea:rgba(110,31,46,.16);
  --wa:#1f7a4d;
  --serif:"Cormorant Garamond","Times New Roman",serif;
  --mano:"Caveat","Segoe Script",cursive;
  --maq:"Courier Prime","Courier New",monospace;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --radio:14px;
  --sombra:0 1px 0 rgba(74,19,32,.05),0 10px 30px -12px rgba(74,19,32,.28);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;min-height:100vh;
  background-color:var(--papel);
  background-image:
    radial-gradient(circle at 15% 10%, rgba(255,255,255,.55), transparent 40%),
    radial-gradient(circle at 85% 60%, rgba(217,165,160,.18), transparent 45%);
  background-attachment:fixed;
  color:var(--tinta);
  font-family:var(--sans);font-size:16px;line-height:1.6;
  overflow-x:hidden;
}
img,svg{max-width:100%}
a{color:var(--vino)}
h1,h2,h3{font-family:var(--serif);font-weight:600;color:var(--vino);line-height:1.1;margin:0}
p{margin:0}
:focus-visible{outline:2px solid var(--vino);outline-offset:3px;border-radius:6px}
.saltar{position:absolute;left:12px;top:-60px;background:var(--vino);color:var(--crema);padding:10px 14px;border-radius:8px;z-index:100;text-decoration:none}
.saltar:focus{top:12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.contenedor{width:min(100% - 32px, 1080px);margin-inline:auto}
.estrecho{width:min(100% - 32px, 680px);margin-inline:auto}

/* etiquetas */
.maq{font-family:var(--maq);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--tinta-suave)}
.mano{font-family:var(--mano);color:var(--vino)}

/* botones */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:12px 22px;border-radius:999px;border:0;cursor:pointer;
  font-family:var(--sans);font-size:16px;font-weight:600;text-decoration:none;line-height:1.2;text-align:center;
  transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-vino{background:var(--vino);color:var(--crema);box-shadow:0 8px 20px -8px rgba(74,19,32,.6)}
.btn-vino:hover{background:var(--vino-2)}
.btn-wa{background:var(--wa);color:#fff;box-shadow:0 8px 20px -8px rgba(20,80,50,.6)}
.btn-wa:hover{background:#196a42}
.btn-linea{background:transparent;color:var(--vino);box-shadow:inset 0 0 0 1.5px var(--vino)}
.btn-linea:hover{background:rgba(110,31,46,.06)}
.btn-grande{min-height:58px;font-size:18px;padding:16px 28px}
.btn svg{width:20px;height:20px;flex:none}

/* encabezado */
.cabecera{padding:14px 0}
.cabecera .contenedor{display:flex;align-items:center;justify-content:space-between;gap:12px}
.marca{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--vino)}
.marca .nombre{font-family:var(--serif);font-weight:600;font-size:21px;line-height:1}
.marca .por{display:block;font-family:var(--maq);font-size:10px;letter-spacing:.2em;color:var(--tinta-suave);text-transform:uppercase;margin-top:3px}
.marca svg{width:28px;height:28px;flex:none}
.cabecera .btn{min-height:42px;padding:8px 16px;font-size:14px}

/* tarjetas papel */
.tarjeta{background:var(--crema);border-radius:var(--radio);box-shadow:var(--sombra);border:1px solid var(--linea)}

/* footer */
.pie-sitio{margin-top:56px;background:var(--vino-osc);color:#f3dcd6;padding:36px 0 calc(96px + env(safe-area-inset-bottom))}
.pie-sitio a{color:#fff}
.pie-sitio .marca{color:#fff}
.pie-sitio .marca .por{color:#e3c3bd}
.pie-sitio .filas{display:grid;gap:18px}
.pie-sitio small{color:#d9b9b3}

/* flotante WhatsApp */
.wa-flotante{
  position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:50;
  width:58px;height:58px;border-radius:50%;background:var(--wa);color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 24px -6px rgba(0,0,0,.4);transition:transform .15s ease;
}
.wa-flotante:hover{transform:scale(1.06)}
.wa-flotante svg{width:30px;height:30px}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}