/* ==========================================================================
   SENDA — botica desde 1911.

   La disciplina viene medida de Santa Maria Novella y de C.O. Bigelow:
   un solo fondo en toda la pagina, titulares en versalitas con tracking muy
   abierto, interlineado 1,0 en display, y esquinas casi rectas (2px, no 16).
   Nada de sombras difusas ni tarjetas flotando.

   Los contrastes de :root estan calculados antes de escribir esto
   (/root/senda-paleta.py). Los que van comentados como "solo relleno" NO se
   pueden usar como color de texto: el laton sobre papel se queda en 2,73.
   ========================================================================== */

/* ------------------------------------------------------------------ fuentes */
@font-face{font-family:'Erode';src:url('../fonts/erode-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Erode';src:url('../fonts/erode-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Erode';src:url('../fonts/erode-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Erode';src:url('../fonts/erode-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Supreme';src:url('../fonts/supreme-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Supreme';src:url('../fonts/supreme-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Supreme';src:url('../fonts/supreme-700.woff2') format('woff2');font-weight:700;font-display:swap}

:root{
  /* fondos y tinta */
  --papel:#F4EFE6;      /* fondo unico de casi todo */
  --papel2:#EAE2D4;     /* fondo alterno */
  --tinta:#221E1A;      /* 14,45 sobre papel */
  --tinta2:#5A5248;     /* 6,70 sobre papel */
  --verde:#1C3B2E;      /* 10,70 como texto sobre papel; tambien fondo oscuro */
  --verde2:#2A5442;
  --blanco:#FDFBF7;

  /* acentos: OJO con cual es de relleno y cual de texto */
  --laton:#B08D3F;        /* SOLO RELLENO. Como texto sobre papel da 2,73. */
  --laton-txt:#7A5C18;    /* 5,44 sobre papel */
  --laton-claro:#D9B872;  /* 6,45 sobre verde */
  --sello:#8C2318;        /* 7,74 sobre papel; blanco encima 8,58 */
  --sello-claro:#E08A7A;  /* 4,72 sobre verde */

  /* deshabilitado con colores propios, nunca opacidad */
  --apagado-bg:#D6CDBE;
  --apagado-tx:#57503F;   /* 5,08 sobre apagado-bg */

  --filo:#D8CFC0;
  --ancho:1240px;
  --radio:2px;
  --barra:76px;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:'Supreme',system-ui,sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;display:block}
img[width]{height:auto}          /* el height del HTML gana al aspect-ratio del CSS */
a{color:var(--verde);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}

:focus-visible{outline:2px solid var(--verde);outline-offset:3px}

/* ------------------------------------------------------------ tipografia */
h1,h2,h3,h4{
  font-family:'Erode',Georgia,serif;
  font-weight:600;
  margin:0 0 .5em;
  line-height:1.04;
  color:var(--verde);
}
h1{font-size:clamp(2.6rem,6.4vw,4.6rem);letter-spacing:-.01em}
h2{font-size:clamp(1.9rem,3.6vw,2.9rem)}
h3{font-size:1.32rem;line-height:1.2}
p{margin:0 0 1.1em;max-width:64ch}

.rotulo{
  font-family:'Supreme',sans-serif;
  font-size:.72rem;font-weight:700;
  text-transform:uppercase;
  letter-spacing:.22em;                 /* el tracking abierto de SMN */
  color:var(--laton-txt);
  margin:0 0 1.2rem;
}
.rotulo.claro{color:var(--laton-claro)}
.entradilla{font-size:1.16rem;color:var(--tinta2);max-width:56ch}
.sub{color:var(--tinta2);font-size:.95rem}

.env{width:min(100% - 2.6rem,var(--ancho));margin-inline:auto}
section{padding:clamp(3.6rem,7vw,6.4rem) 0}
.oscuro{background:var(--verde);color:var(--papel)}
.oscuro h1,.oscuro h2,.oscuro h3{color:var(--blanco)}
.oscuro p,.oscuro .entradilla,.oscuro .sub{color:#DCD5C6}
.alterno{background:var(--papel2)}
.linea{border:0;border-top:1px solid var(--filo);margin:0}

/* --------------------------------------------------------------- botones */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:'Supreme',sans-serif;font-size:.82rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.14em;
  padding:.95rem 1.7rem;border:1px solid var(--verde);border-radius:var(--radio);
  background:var(--verde);color:var(--blanco);          /* 11,85 */
  cursor:pointer;transition:background .18s,color .18s;
  text-decoration:none;
}
.btn:hover{background:var(--verde2);color:var(--blanco);text-decoration:none}
.btn.hueco{background:transparent;color:var(--verde)}   /* 10,70 */
.btn.hueco:hover{background:var(--verde);color:var(--blanco)}
.btn.laton{background:var(--laton);border-color:var(--laton);color:var(--tinta)} /* 5,30 */
.btn.laton:hover{background:var(--laton-claro);color:var(--tinta)}
.oscuro .btn.hueco{border-color:var(--laton-claro);color:var(--laton-claro)}
.oscuro .btn.hueco:hover{background:var(--laton-claro);color:var(--verde)}
.btn[disabled],.btn.apagado{
  background:var(--apagado-bg);border-color:var(--apagado-bg);
  color:var(--apagado-tx);cursor:not-allowed;              /* 5,08, sin opacidad */
}

/* ------------------------------------------------------------------ barra */
.barra{
  position:sticky;top:0;z-index:60;
  background:var(--papel);border-bottom:1px solid var(--filo);
}
.barra .env{display:flex;align-items:center;gap:1.4rem;height:var(--barra)}
.marca{
  font-family:'Erode',serif;font-weight:700;font-size:1.42rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--verde);
  text-decoration:none;line-height:1;
}
.marca small{
  display:block;font-family:'Supreme',sans-serif;font-size:.56rem;font-weight:500;
  letter-spacing:.24em;color:var(--laton-txt);margin-top:.28rem;
}
.nav{display:flex;gap:1.5rem;margin-left:auto;align-items:center}
.nav a{
  font-size:.78rem;font-weight:500;text-transform:uppercase;letter-spacing:.13em;
  color:var(--tinta);text-decoration:none;padding:.4rem 0;
  border-bottom:1px solid transparent;
}
.nav a:hover,.nav a[aria-current="page"]{border-bottom-color:var(--laton);text-decoration:none}
.acciones{display:flex;gap:.7rem;align-items:center;margin-left:.4rem}

.cesta-btn{
  position:relative;display:inline-flex;align-items:center;gap:.5rem;
  border:1px solid var(--verde);border-radius:var(--radio);background:transparent;
  color:var(--verde);font-family:'Supreme',sans-serif;font-size:.76rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.12em;padding:.62rem 1rem;cursor:pointer;
}
.cesta-btn:hover{background:var(--verde);color:var(--blanco)}
.cuenta{
  display:inline-grid;place-items:center;min-width:1.35rem;height:1.35rem;padding:0 .3rem;
  background:var(--sello);color:var(--blanco);border-radius:99px;   /* 8,58 */
  font-size:.7rem;line-height:1;
}
.hamburguesa{display:none;background:none;border:1px solid var(--filo);border-radius:var(--radio);
  padding:.55rem .7rem;cursor:pointer;color:var(--tinta)}

/* ------------------------------------------------------------------- hero */
.hero{padding:clamp(3.2rem,6vw,5.6rem) 0 clamp(2.6rem,5vw,4.4rem)}
.hero h1{margin-bottom:1.1rem}
.hero .entradilla{font-size:1.24rem}
.hero-rejilla{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,4vw,4rem);align-items:end}
.hero-foto{border:1px solid var(--filo);border-radius:var(--radio);overflow:hidden}
.hero-foto img{width:100%;height:auto}
.datos-hero{display:flex;flex-wrap:wrap;gap:2rem;margin-top:2rem;padding-top:1.6rem;border-top:1px solid var(--filo)}
.dato .n{font-family:'Erode',serif;font-size:2rem;font-weight:700;color:var(--verde);line-height:1}
.dato .q{font-size:.72rem;text-transform:uppercase;letter-spacing:.16em;color:var(--tinta2);margin-top:.35rem}

/* ------------------------------------------------------ estado abierto/cerrado */
.estado{
  display:inline-flex;align-items:center;gap:.55rem;
  font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;
  padding:.4rem .8rem;border-radius:var(--radio);
}
.estado .punto{width:.5rem;height:.5rem;border-radius:99px;background:currentColor}
.estado.abierto{background:#DCE7DE;color:#1C3B2E}     /* 9,26 */
.estado.cerrado{background:#F0DCD8;color:#8C2318}     /* 6,66 */

/* --------------------------------------------------------------- rejillas */
.rejilla{display:grid;gap:1.4rem}
.r2{grid-template-columns:repeat(2,1fr)}
.r3{grid-template-columns:repeat(3,1fr)}
.r4{grid-template-columns:repeat(4,1fr)}

.ficha{
  border:1px solid var(--filo);border-radius:var(--radio);
  background:var(--blanco);padding:1.5rem;display:flex;flex-direction:column;
}
.oscuro .ficha{background:rgba(255,255,255,.05);border-color:rgba(217,184,114,.34)}
.ficha h3{margin-bottom:.4rem}
.ficha .sub{margin-bottom:.9rem}
.ficha img{border-radius:var(--radio);margin:-1.5rem -1.5rem 1.2rem;width:calc(100% + 3rem);max-width:none}

/* ------------------------------------------------------------- el botiquin */
.botiquin{background:var(--verde);color:var(--papel);position:relative}
.botiquin .cabecera{text-align:center;padding:clamp(3rem,6vw,5rem) 1.3rem 0}
.botiquin h2{color:var(--blanco)}
.pista{
  display:inline-block;margin-top:.8rem;padding:.4rem .9rem;border-radius:var(--radio);
  background:rgba(0,0,0,.42);color:var(--blanco);                 /* pastilla propia */
  font-size:.74rem;text-transform:uppercase;letter-spacing:.15em;
}

/* -------------------------------------------------------- pie y aviso demo */
.pie{background:var(--verde);color:#DCD5C6;padding:3.4rem 0 2.2rem}
.pie h3{color:var(--blanco);font-size:1rem;letter-spacing:.14em;text-transform:uppercase;
  font-family:'Supreme',sans-serif;font-weight:700}
.pie a{color:var(--laton-claro)}                                   /* 6,45 */
.pie .rejilla{gap:2.4rem}
.aviso-demo{
  margin-top:2.6rem;padding-top:1.6rem;border-top:1px solid rgba(217,184,114,.34);
  font-size:.86rem;color:#DCD5C6;                                   /* 8,49 sobre verde */
}
.aviso-demo strong{color:var(--laton-claro)}

/* ----------------------------------------------------------- aviso legal RD */
.legal{
  border:1px solid var(--laton);border-left-width:4px;border-radius:var(--radio);
  background:var(--papel2);padding:1.3rem 1.5rem;margin:0 0 1.8rem;
}
.legal p{margin:0;font-size:.95rem;color:var(--tinta)}
.legal p + p{margin-top:.7rem}
.legal .titulo{
  font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.16em;
  color:var(--laton-txt);margin-bottom:.5rem;                       /* 5,44 */
}
.distintivo{
  display:inline-flex;align-items:center;gap:.75rem;
  border:1px solid var(--filo);border-radius:var(--radio);background:var(--blanco);
  padding:.6rem .9rem;text-decoration:none;color:var(--tinta);
}
.distintivo .bandera{width:34px;height:23px;border-radius:1px;flex:none}
.distintivo span{font-size:.74rem;line-height:1.35;max-width:23ch}

/* ------------------------------------------------------------- apariciones */
.rev{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.rev.visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rev{opacity:1;transform:none}}

/* ------------------------------------------------------------------ movil */
@media (max-width:960px){
  .r4{grid-template-columns:repeat(2,1fr)}
  .r3{grid-template-columns:repeat(2,1fr)}
  .hero-rejilla{grid-template-columns:1fr}
}
@media (max-width:720px){
  body{font-size:16px}
  .nav{
    position:fixed;inset:var(--barra) 0 auto 0;background:var(--papel);
    flex-direction:column;align-items:flex-start;gap:0;padding:1rem 1.3rem 1.6rem;
    border-bottom:1px solid var(--filo);display:none;
  }
  .nav.abierto{display:flex}
  .nav a{width:100%;padding:.85rem 0;border-bottom:1px solid var(--filo)}
  .hamburguesa{display:inline-flex;margin-left:auto;order:3}
  .acciones{margin-left:0;order:2}
  .r2,.r3,.r4{grid-template-columns:1fr}
  .marca{font-size:1.16rem}
  section{padding:2.8rem 0}
}