/* Farmacia Pura Vida · Benferri. Los colores son los de su logo (las cápsulas y las letras de PURAVIDA) sobre el
   blanco de su fachada. Quicksand, redonda como las letras de su logo, para los títulos; Figtree para el texto. */
@font-face{ font-family:"Quicksand"; src:url("../fonts/quicksand.woff2") format("woff2"); font-weight:300 700; font-display:swap; }
@font-face{ font-family:"Figtree"; src:url("../fonts/figtree.woff2") format("woff2"); font-weight:300 900; font-display:swap; }

:root{
  --fondo:#fbf9f5; --crema:#f4eee6; --tinta:#1d1d1b; --gris:#57534e; --linea:rgba(29,29,27,.14);
  --rojo:#e40718; --amarillo:#f9c80e; --rosa:#f43bd6; --verde:#4fe35c; --pastilla:#10da93; --rojo-texto:#c4061a;
  --titulos:"Quicksand", system-ui, sans-serif; --texto:"Figtree", system-ui, sans-serif;
  --nav-h:70px; --gutter:clamp(18px, 4vw, 56px); --seccion:clamp(72px, 10vw, 136px);
}
*{ box-sizing:border-box; }
html{ background:var(--fondo); -webkit-text-size-adjust:100%; }
html, body{ overflow-x:clip; }
body{ margin:0; background:var(--fondo); color:var(--tinta); font:400 1.02rem/1.6 var(--texto); }
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; }
h1, h2, h3{ margin:0; text-wrap:balance; }
h2{ font-family:var(--titulos); font-weight:700; font-size:clamp(2rem, 4.4vw, 3.5rem); line-height:1.05; letter-spacing:-.015em; }
h3{ font-family:var(--titulos); font-weight:700; font-size:clamp(1.45rem, 2.4vw, 2rem); line-height:1.15; }
p{ margin:0; text-wrap:pretty; }
.enlace{ text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:1px; }
.enlace:hover{ color:var(--rojo-texto); }
:focus-visible{ outline:2px solid var(--rojo); outline-offset:3px; }

/* ---------- botones: el acabado de los de Almo (filete fino, mayúsculas pequeñas y espaciadas) */
.boton{ display:inline-flex; align-items:center; justify-content:center; padding:1.05em 2.1em; border:1px solid var(--tinta); background:var(--tinta); color:#fff;
  font-family:var(--texto); font-weight:600; font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; text-decoration:none; transition:background .5s ease, color .5s ease, border-color .5s ease; }
.boton:hover{ background:transparent; color:var(--tinta); }
.boton--linea{ background:transparent; color:var(--tinta); }
.boton--linea:hover{ background:var(--tinta); color:#fff; }
.boton--blanco{ background:#fff; border-color:#fff; color:var(--rojo-texto); }
.boton--blanco:hover{ background:transparent; color:#fff; }
.boton--claro{ background:transparent; border-color:rgba(255,255,255,.75); color:#fff; }
.boton--claro:hover{ background:#fff; border-color:#fff; color:var(--rojo-texto); }
.boton--nav{ padding:.8em 1.4em; font-size:.7rem; }

/* ---------- su logo: la cruz de cápsulas, FARMACIA y PURAVIDA (trazos de punta redonda) */
.logo{ display:block; width:100%; height:auto; overflow:visible; }
.letra, .logo__farmacia{ fill:none; stroke-linecap:round; stroke-linejoin:round; }
.logo__farmacia{ stroke:var(--tinta); }
.cap__brillo{ fill:none; stroke:#fff; stroke-width:2.2; stroke-linecap:round; opacity:.8; }
.pastilla__ranura{ fill:none; stroke:#0a9d6b; stroke-width:1.3; stroke-linecap:round; }

/* ---------- precarga: un velo blanco; el logo de la portada se monta en el centro y viaja a su sitio */
.velo{ position:fixed; inset:0; z-index:60; background:var(--fondo); pointer-events:none; display:none; }
html.anima .velo{ display:block; }
html.anima:not(.lista) .marca{ position:relative; z-index:61; }
html.anima .marca .letra, html.anima .marca .logo__farmacia{ stroke-dasharray:1 2; stroke-dashoffset:1; opacity:0; }
html.anima .marca .cap, html.anima .marca .pastilla, html.anima .portada__ficha, html.anima .nav{ opacity:0; }

/* ---------- cabecera fina, siempre visible */
.nav{ position:fixed; top:0; left:0; right:0; z-index:40; height:var(--nav-h); display:flex; align-items:center; gap:clamp(14px, 2.4vw, 34px); padding:0 var(--gutter);
  background:rgba(251,249,245,.86); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-bottom:1px solid var(--linea); }
.nav__logo{ display:flex; align-items:center; gap:10px; text-decoration:none; font-family:var(--titulos); font-weight:700; font-size:1.05rem; margin-right:auto; }
.nav__cruz{ width:34px; height:auto; }
.nav__enlaces{ display:flex; align-items:center; gap:clamp(16px, 2.4vw, 34px); }
.nav__enlaces a{ text-decoration:none; font-size:.9rem; font-weight:500; }
.nav__enlaces a:hover{ color:var(--rojo-texto); }
.nav__enlaces .nav__llamar{ font-weight:600; font-variant-numeric:tabular-nums; }
.nav__abrir{ display:none; }

/* ---------- portada: el logo grande en el blanco y, al lado, la fachada de día, de noche y la sala */
.portada{ display:grid; grid-template-columns:minmax(0, .82fr) minmax(0, 1.18fr); align-items:center; gap:clamp(28px, 4vw, 64px); min-height:100svh;
  padding:calc(var(--nav-h) + 28px) var(--gutter) 40px; }
.portada__marca{ display:flex; flex-direction:column; align-items:flex-start; gap:clamp(30px, 5vh, 52px); }
.marca{ width:min(100%, 580px); }
.portada__ficha{ display:grid; gap:6px; color:var(--gris); }
.portada__365{ font-family:var(--titulos); font-weight:700; font-size:clamp(1.35rem, 2.1vw, 1.8rem); color:var(--tinta); margin-bottom:6px; }
.hoy{ color:var(--tinta); font-weight:600; }
.portada__botones{ display:flex; flex-wrap:wrap; gap:12px; margin-top:18px; }
.portada__fotos{ position:relative; aspect-ratio:4/3; border-radius:28px; overflow:hidden; background:var(--crema); }
.portada__fotos img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.6s ease; }
.portada__fotos img:first-child, .portada__fotos img[data-activa]{ opacity:1; }
.portada__fotos[data-pasa] img:first-child:not([data-activa]){ opacity:0; }

/* ---------- servicios: una cápsula grande se abre en sus dos mitades y deja ver cada servicio */
.servicios{ background:var(--crema); }
.servicios__fijo{ min-height:100svh; display:grid; grid-template-rows:auto 1fr auto; align-items:center; gap:clamp(16px, 3vh, 36px); padding:calc(var(--nav-h) + 26px) var(--gutter) clamp(28px, 5vh, 56px); overflow:hidden; }
.capsula{ --H:min(42svh, 29vw); position:relative; height:var(--H); width:100%; }
.capsula__mitad{ position:absolute; top:0; height:100%; width:calc(var(--H) * 1.18); background:var(--a, var(--rosa)); z-index:2; }
.capsula__mitad--izq{ right:50%; border-radius:calc(var(--H) / 2) 0 0 calc(var(--H) / 2); }
.capsula__mitad--der{ left:50%; border-radius:0 calc(var(--H) / 2) calc(var(--H) / 2) 0; background:var(--b, var(--rojo)); }
.capsula__mitad::after{ content:""; position:absolute; height:5px; border-radius:5px; background:#fff; opacity:.75; width:18%; }
.capsula__mitad--izq::after{ left:18%; bottom:22%; }
.capsula__mitad--der::after{ right:18%; top:22%; }
.ventana{ position:absolute; top:0; left:50%; height:100%; width:calc(var(--H) * 1.43); transform:translateX(-50%); border-radius:calc(var(--H) * .16); overflow:hidden; background:var(--tinta);
  clip-path:inset(0 50% 0 50% round calc(var(--H) * .16)); }
.ventana__foto{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; }
.servicios__textos{ position:relative; width:min(100%, 40rem); min-height:9.5rem; margin:0 auto; text-align:center; }
.servicio{ position:absolute; inset:0 0 auto; display:grid; gap:10px; opacity:0; visibility:hidden; }
.servicio p{ color:var(--gris); }
html:not(.anima) .capsula, html:not(.js) .capsula{ display:none; }
html:not(.anima) .servicios__textos{ min-height:0; display:grid; gap:34px; }
html:not(.anima) .servicio{ position:static; opacity:1; visibility:visible; }

/* ---------- horario: cada día es una cápsula que va de la hora de abrir a la de cerrar (eje de 8:00 a 22:00) */
.horario{ padding:var(--seccion) var(--gutter); display:grid; gap:clamp(30px, 5vw, 56px); }
.horario__cabeza{ display:grid; gap:12px; }
.horario__hoy{ font-weight:600; font-size:1.1rem; }
.dias{ display:grid; gap:10px; }
.dia, .dias__eje{ display:grid; grid-template-columns:9rem 1fr 8rem; align-items:center; gap:clamp(12px, 2vw, 24px); }
.dia__nombre{ font-weight:500; }
.dia__horas{ color:var(--gris); font-variant-numeric:tabular-nums; text-align:right; }
.dia__eje{ position:relative; height:26px; border-radius:13px; background:rgba(29,29,27,.06); }
.dia__barra{ position:absolute; top:0; bottom:0; left:7.14%; border-radius:13px; transform-origin:left center;
  background:linear-gradient(90deg, var(--c1) 50%, var(--c2) 50%); }
.dia--largo .dia__barra{ width:85.71%; }
.dia--corto .dia__barra{ width:35.71%; }
.dia:nth-child(4n+1){ --c1:var(--amarillo); --c2:var(--rojo); }
.dia:nth-child(4n+2){ --c1:var(--rosa); --c2:var(--rojo); }
.dia:nth-child(4n+3){ --c1:var(--rojo); --c2:var(--amarillo); }
.dia:nth-child(4n+4){ --c1:var(--rojo); --c2:var(--rosa); }
.dia[data-hoy] .dia__nombre, .dia[data-hoy] .dia__horas{ color:var(--tinta); font-weight:700; }
.dia[data-hoy] .dia__eje{ box-shadow:0 0 0 2px var(--fondo), 0 0 0 3.5px var(--tinta); }
.dias__eje{ color:var(--gris); font-size:.82rem; font-variant-numeric:tabular-nums; }
.dias__eje span{ position:relative; }
.dias__eje{ grid-template-columns:9rem 1fr 8rem; }
.dias__eje span:nth-child(1){ grid-column:2; grid-row:1; justify-self:start; margin-left:calc(7.14% - 1.3em); }
.dias__eje span:nth-child(2){ grid-column:2; grid-row:1; justify-self:start; margin-left:calc(42.86% - 1.6em); }
.dias__eje span:nth-child(3){ grid-column:2; grid-row:1; justify-self:start; margin-left:calc(92.86% - 1.6em); }

/* ---------- encargo exprés */
.encargo{ background:var(--rojo); color:#fff; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px 48px; padding:clamp(56px, 8vw, 96px) var(--gutter); }
.encargo__texto{ display:grid; gap:14px; max-width:40rem; }
.encargo__texto p{ font-size:1.1rem; }
.encargo__botones{ display:flex; flex-wrap:wrap; gap:12px; }

/* ---------- equipo */
.equipo{ padding:var(--seccion) var(--gutter); display:grid; grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr); gap:clamp(28px, 4vw, 64px); align-items:center; }
.equipo__cabeza{ display:grid; gap:16px; max-width:30rem; }
.equipo__cabeza p{ color:var(--gris); font-size:1.08rem; }
.equipo__acuarela{ margin:0; display:grid; gap:10px; }
.equipo__acuarela img{ border-radius:24px; }
.equipo__acuarela figcaption, .persona figcaption{ font-size:.86rem; color:var(--gris); }
.equipo__fila{ grid-column:1 / -1; display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:clamp(12px, 1.6vw, 22px); }
.persona{ margin:0; display:grid; gap:10px; }
.persona img{ width:100%; aspect-ratio:420/500; object-fit:cover; border-radius:18px; background:var(--crema); }
.persona figcaption{ display:grid; line-height:1.35; }
.persona strong{ color:var(--tinta); font-weight:600; font-size:.98rem; }

/* ---------- visítanos */
.visitanos{ padding:0 var(--gutter) calc(var(--seccion) * .8); display:grid; gap:clamp(30px, 4vw, 48px); }
.mapa{ position:relative; display:block; overflow:hidden; aspect-ratio:1600/700; border-radius:24px; }
.mapa img{ width:100%; height:100%; object-fit:cover; }
.mapa__punto{ position:absolute; left:50%; top:50%; width:22px; height:22px; margin:-11px 0 0 -11px; border-radius:50%; background:var(--rojo); border:3px solid #fff; box-shadow:0 0 0 7px rgba(228,7,24,.22); }
.mapa__osm{ position:absolute; right:10px; bottom:8px; font-size:.68rem; background:rgba(255,255,255,.85); padding:2px 6px; border-radius:4px; }
.visitanos__datos{ display:grid; grid-template-columns:1.1fr 1fr 1fr; gap:clamp(24px, 4vw, 56px); align-items:start; }
.visitanos__datos h2{ font-size:clamp(1.7rem, 2.8vw, 2.4rem); margin-bottom:10px; }
.visitanos__datos p{ color:var(--gris); }
.visitanos__datos p + p{ margin-top:8px; }
.resumen{ margin:0; display:grid; }
.resumen div{ display:flex; justify-content:space-between; gap:16px; padding:10px 0; border-bottom:1px solid var(--linea); }
.resumen dt{ font-weight:500; } .resumen dd{ margin:0; color:var(--gris); font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; }
.visitanos__contacto{ display:grid; gap:12px; }
.visitanos__contacto p + p{ margin-top:0; }
.visitanos__guardia{ font-size:.92rem; }

/* ---------- pie */
.pie{ background:var(--tinta); color:rgba(255,255,255,.78); display:flex; gap:clamp(24px, 4vw, 56px); align-items:center; padding:52px var(--gutter) calc(52px + env(safe-area-inset-bottom)); font-size:.86rem; }
.pie__logo{ width:220px; flex:none; }
.pie .logo__farmacia{ stroke:#fff; }
.pie__datos{ display:grid; gap:6px; }
.pie strong{ color:#fff; font-weight:600; }
.pie__legal{ display:flex; flex-wrap:wrap; gap:18px; margin-top:8px; }
.pie__legal a{ color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.4); }

.subir{ position:fixed; right:18px; bottom:18px; z-index:35; width:46px; height:46px; border-radius:50%; border:0; background:var(--tinta); color:#fff; display:grid; place-items:center; cursor:pointer; opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s; }
.subir.is-visible{ opacity:1; visibility:visible; }
.subir svg{ width:18px; height:18px; }

/* ---------- tablet y móvil */
@media (max-width:900px){
  :root{ --nav-h:62px; }
  .nav__logo span{ display:none; }
  .nav__abrir{ display:grid; place-content:center; gap:6px; width:44px; height:44px; padding:0; border:0; background:none; cursor:pointer; }
  .nav__abrir span{ display:block; width:24px; height:1.5px; background:var(--tinta); transition:transform .3s; }
  .nav__abrir[aria-expanded="true"] span:first-child{ transform:translateY(3.75px) rotate(45deg); }
  .nav__abrir[aria-expanded="true"] span:last-child{ transform:translateY(-3.75px) rotate(-45deg); }
  .nav__enlaces{ position:fixed; top:var(--nav-h); left:0; right:0; flex-direction:column; align-items:stretch; gap:0; padding:8px var(--gutter) 24px; background:var(--fondo); border-bottom:1px solid var(--linea);
    opacity:0; visibility:hidden; transform:translateY(-8px); transition:opacity .3s, visibility .3s, transform .3s; }
  .nav__enlaces a{ padding:14px 0; border-bottom:1px solid var(--linea); font-size:1rem; }
  .nav--abierta .nav__enlaces{ opacity:1; visibility:visible; transform:none; }

  .portada{ grid-template-columns:1fr; min-height:0; padding-top:calc(var(--nav-h) + 34px); gap:30px; }
  .portada__marca{ align-items:stretch; gap:28px; }
  .marca{ width:100%; }

  .servicios__fijo{ padding-top:calc(var(--nav-h) + 18px); gap:18px; }
  .capsula{ --H:min(46vw, 30svh); }
  .servicios__textos{ min-height:12rem; }

  .dia, .dias__eje{ grid-template-columns:5.6rem 1fr 6.6rem; gap:10px; }
  .dia__nombre, .dia__horas{ font-size:.9rem; }
  .dias__eje{ font-size:.74rem; }

  .equipo{ grid-template-columns:1fr; }
  .equipo__fila{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .mapa{ aspect-ratio:4/3; }
  .visitanos__datos{ grid-template-columns:1fr; }
  .pie{ flex-direction:column; align-items:flex-start; padding-bottom:calc(84px + env(safe-area-inset-bottom)); }
  .pie__logo{ width:190px; }
}
@media (max-width:520px){
  .equipo__fila{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .dia, .dias__eje{ grid-template-columns:4.6rem 1fr 5.8rem; }
  .dia__horas{ font-size:.82rem; }
}
@media (max-width:420px){ .boton--nav{ padding:.75em 1.1em; letter-spacing:.12em; } }
/* ganchos de la precarga (las cápsulas llegan desde su lado; ver main.js) */
.cap--arriba, .cap--abajo, .cap--izquierda, .cap--derecha{ transform-box:view-box; }
.logo__puravida{ stroke-linecap:round; }
.portada__logo{ max-width:100%; }