/* Farmacia Joaquín Cárceles — v3 (11-nov-2026)
   Color de su Instagram (salvia #C3CFC3), su casi negro y blanco roto. Una familia: Jost, cercana a la
   Gotham de su rótulo, en 300 para lo grande. Fotos de su propia reforma. */
@font-face{ font-family:"Jost"; font-style:normal; font-weight:300 500; font-display:swap;
  src:url(../fonts/jost-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:"Jost"; font-style:normal; font-weight:300 500; font-display:swap;
  src:url(../fonts/jost-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root{
  --salvia:#C3CFC3; --crema:#F5F4F0; --tinta:#12181F; --gris:#555B61; --linea:rgba(18,24,31,.14);
  --verde:#3F6A4A; --rojo:#B8322C;
  --ancho:1240px; --lado:clamp(1.25rem, 4.5vw, 3.5rem); --cab-h:72px; --r:22px; --r-s:14px;
  --sale:cubic-bezier(.22,1,.36,1);
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-padding-top:calc(var(--cab-h) + 8px); overflow-x:clip; scrollbar-gutter:stable; -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--crema); color:var(--tinta); font-family:"Jost", system-ui, sans-serif; font-size:1.0625rem; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:clip; }
img{ display:block; max-width:100%; height:auto; }
figure{ margin:0; }
a{ color:inherit; text-underline-offset:4px; text-decoration-thickness:1px; }
:focus-visible{ outline:2px solid var(--tinta); outline-offset:3px; }
h1,h2,h3{ margin:0; font-weight:300; text-wrap:balance; }
p{ text-wrap:pretty; }
::selection{ background:var(--salvia); color:var(--tinta); }
.saltar{ position:absolute; left:1rem; top:-4rem; z-index:300; background:var(--tinta); color:#fff; padding:.6rem 1rem; }
.saltar:focus{ top:1rem; }
.titulo{ font-size:clamp(2.4rem, 5.2vw, 4.6rem); line-height:1.02; letter-spacing:-.035em; }
.boton{ display:inline-flex; align-items:center; gap:.6rem; padding:.95rem 1.5rem; border-radius:999px; background:var(--salvia); color:var(--tinta);
  text-decoration:none; font-weight:500; transition:background-color .2s, transform .2s var(--sale); }
.boton:hover{ background:#fff; }
.boton:active{ transform:scale(.97); }
.suave{ color:var(--gris); font-size:.94rem; }

/* ---------- cabecera ---------- */
.cab{ position:fixed; inset:0 0 auto; z-index:50; height:var(--cab-h); transition:background-color .3s, box-shadow .3s, transform .4s var(--sale); }
.cab.is-bajada{ background:rgba(245,244,240,.9); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); box-shadow:0 1px 0 var(--linea); }
.cab.is-oculta{ transform:translate3d(0,-100%,0); }
.cab__dentro{ max-width:var(--ancho); height:100%; margin:0 auto; padding:0 var(--lado); display:flex; align-items:center; gap:2.25rem; }
.cab__logo{ transition:opacity .3s; }
.cab__logo img{ height:28px; width:auto; }
/* arriba del todo ya está el JCA grande de la portada */
.cab:not(.is-bajada):not(.is-abierta) .cab__logo{ opacity:0; pointer-events:none; }
.cab__nav{ margin-left:auto; display:flex; gap:1.9rem; }
.cab__nav a{ text-decoration:none; font-size:.97rem; }
.cab__nav a:hover{ text-decoration:underline; }
.cab__tel{ text-decoration:none; font-weight:500; padding:.5rem 1rem; border-radius:999px; border:1px solid var(--tinta); white-space:nowrap; transition:background-color .2s, color .2s; }
.cab__tel:hover{ background:var(--tinta); color:#fff; }
.cab__boton{ display:none; background:none; border:0; padding:.7rem; margin-right:-.7rem; cursor:pointer; position:relative; z-index:2; }
.cab__boton span{ display:block; width:24px; height:1.5px; background:var(--tinta); margin:6px 0; transition:transform .3s var(--sale); }
.cab.is-abierta .cab__boton span:first-child{ transform:translateY(3.75px) rotate(45deg); }
.cab.is-abierta .cab__boton span:last-child{ transform:translateY(-3.75px) rotate(-45deg); }
@media (max-width:860px){
  .cab__dentro{ gap:1rem; }
  .cab__boton{ display:block; margin-left:auto; }
  .cab__tel{ display:none; }
  .cab__nav{ position:fixed; inset:0; z-index:1; height:100dvh; margin:0; background:var(--salvia); flex-direction:column; gap:0;
    padding:calc(var(--cab-h) + 1.5rem) var(--lado); opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s; }
  .cab__nav a{ font-size:2.1rem; font-weight:300; letter-spacing:-.02em; padding:.55rem 0; border-bottom:1px solid var(--linea); }
  .cab.is-abierta{ transform:none !important; background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:none; }
  .cab.is-abierta .cab__nav{ opacity:1; visibility:visible; }
}

/* ---------- portada: la foto del interior se abre hasta llenar la pantalla ---------- */
.heroe{ position:relative; background:var(--salvia); }
.heroe__fijo{ position:relative; height:100svh; min-height:560px; overflow:hidden; }
.heroe__jca{ position:absolute; left:var(--lado); top:calc(var(--cab-h) + 7vh); width:min(34vw, 470px); height:auto; stroke:var(--tinta); }
.heroe__titulo{ position:absolute; left:var(--lado); bottom:calc(6vh + 2.6rem); width:44vw; font-size:clamp(2.8rem, 5.8vw, 6.2rem); line-height:.98; letter-spacing:-.04em; }
.linea{ display:block; overflow:hidden; padding-bottom:.06em; }
.linea > span{ display:block; }
.heroe__sub{ position:absolute; left:var(--lado); bottom:6vh; margin:0; font-size:1.1rem; }
/* sin JS: la foto en su columna; con JS (.heroe--zoom) la caja es la pantalla y se escala desde ahí */
.heroe__marco{ position:absolute; left:50%; right:var(--lado); top:calc(var(--cab-h) + 2vh); bottom:4vh; border-radius:var(--r); overflow:hidden; z-index:2; }
.heroe__foto{ width:100%; height:100%; object-fit:cover; object-position:50% 60%; }
.heroe--zoom .heroe{ height:200svh; }
.heroe--zoom .heroe__fijo{ position:sticky; top:0; }
.heroe--zoom .heroe__marco{ left:-48px; top:-48px; right:auto; bottom:auto; width:calc(100% + 96px); height:calc(100% + 96px); transform-origin:0 0; will-change:transform; }
.heroe--zoom .heroe__foto{ position:absolute; left:48px; top:48px; width:calc(100% - 96px); height:calc(100% - 96px); transform-origin:0 0; will-change:transform; }

@media (max-width:960px), (pointer:coarse){
  .heroe__fijo{ height:auto; min-height:0; padding:calc(var(--cab-h) + 1.25rem) var(--lado) var(--lado); display:flex; flex-direction:column; }
  .heroe__jca{ position:static; width:min(44vw, 260px); }
  .heroe__titulo{ position:static; width:auto; margin-top:1.6rem; font-size:clamp(2.7rem, 11.5vw, 4.6rem); }
  .heroe__sub{ position:static; margin-top:.7rem; }
  .heroe__marco{ position:relative; inset:auto; margin-top:1.6rem; height:56svh; min-height:320px; }
}

/* entrada (solo al llegar o recargar): el trazo dibuja JCA, el nombre sube y la foto aparece */
.anima.intro{ overflow:hidden; }
.anima.intro .heroe__jca path{ stroke-dasharray:1 1; animation:traza .62s cubic-bezier(.65,0,.35,1) .3s both; }
.anima.intro .heroe__jca path:nth-child(2){ animation-delay:.62s; }
.anima.intro .heroe__jca path:nth-child(3){ animation-delay:.94s; }
.anima.intro .linea > span{ animation:sube 1s var(--sale) .75s both; }
.anima.intro .linea + .linea > span{ animation-delay:.87s; }
.anima.intro .heroe__sub{ animation:asoma .8s ease 1.15s both; }
.anima.intro .heroe__marco{ animation:asoma 1s ease .8s both; }
@keyframes traza{ from{ stroke-dashoffset:1; } to{ stroke-dashoffset:0; } }
@keyframes sube{ from{ transform:translate3d(0,105%,0); } to{ transform:translate3d(0,0,0); } }
@keyframes asoma{ from{ opacity:0; } to{ opacity:1; } }
@media (max-width:960px), (pointer:coarse){
  .anima.intro .heroe__marco{ animation:abre 1.2s var(--sale) .8s both; }
  @keyframes abre{ from{ opacity:0; transform:scale(.92); } to{ opacity:1; transform:none; } }
}

/* ---------- hoy ---------- */
.ahora{ background:var(--tinta); color:#fff; }
.ahora__dentro{ max-width:var(--ancho); margin:0 auto; padding:1.15rem var(--lado); display:grid; grid-template-columns:1.2fr 1fr auto; gap:.4rem 2rem; align-items:center; }
.ahora p{ margin:0; display:flex; align-items:center; gap:.7rem; }
.ahora a{ text-decoration:none; }
.ahora a:hover{ text-decoration:underline; }
.ahora__punto{ width:9px; height:9px; border-radius:50%; background:#8FB89A; flex:none; }
.ahora.is-cerrada .ahora__punto{ background:#E0675F; }
.ahora .abierto, .ahora .cerrado{ font-weight:500; }
@media (max-width:760px){ .ahora__dentro{ grid-template-columns:1fr; padding:1.1rem var(--lado) 1.2rem; } .ahora p + p{ color:#C9CED3; font-size:.95rem; } }

/* ---------- servicios ---------- */
.servicios, .historia, .visita{ max-width:var(--ancho); margin:0 auto; padding:clamp(4.5rem, 9vw, 8rem) var(--lado) 0; }
.servicios__lista{ list-style:none; margin:clamp(2rem, 4vw, 3.5rem) 0 0; padding:0; border-bottom:1px solid var(--linea); }
.serv{ display:grid; grid-template-columns:1.15fr 1fr 150px; gap:1rem 3rem; align-items:center; padding:1.4rem 0; border-top:1px solid var(--linea); }
.serv h3{ font-size:clamp(1.7rem, 3.3vw, 3rem); line-height:1.05; letter-spacing:-.03em; transition:transform .5s var(--sale); }
.serv p{ margin:0; color:var(--gris); max-width:34ch; }
.serv__foto{ border-radius:var(--r-s); overflow:hidden; }
.serv__foto img{ width:100%; aspect-ratio:4/5; object-fit:cover; transition:transform .7s var(--sale); }
@media (hover:hover){ .serv:hover h3{ transform:translateX(.6rem); } .serv:hover .serv__foto img{ transform:scale(1.06); } }
@media (max-width:700px){
  .serv{ grid-template-columns:96px 1fr; grid-template-rows:auto auto; gap:.35rem 1.1rem; padding:1.1rem 0; }
  .serv__foto{ grid-column:1; grid-row:1 / 3; order:-1; border-radius:10px; }
  .serv h3{ font-size:1.55rem; align-self:end; }
  .serv p{ font-size:.95rem; align-self:start; }
}

/* ---------- historia: la fachada antigua se convierte en la nueva ---------- */
.historia__texto{ margin:1.6rem 0 0; max-width:36ch; font-size:clamp(1.25rem, 2.2vw, 1.85rem); line-height:1.4; font-weight:300; letter-spacing:-.01em; }
.historia__texto strong{ font-weight:400; }
.cambio{ margin-top:clamp(2.5rem, 5vw, 4rem); display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; }
.cambio figure{ position:relative; border-radius:var(--r); overflow:hidden; }
.cambio img{ width:100%; aspect-ratio:16/9; object-fit:cover; }
.cambio figcaption{ position:absolute; left:1rem; bottom:1rem; z-index:2; padding:.45rem .9rem; border-radius:999px; background:rgba(18,24,31,.72); color:#fff; font-size:.92rem; }
.cambio figcaption b{ font-weight:500; margin-right:.45rem; }
.anima .cambio{ display:block; position:relative; border-radius:var(--r); overflow:hidden; transform:translateZ(0); }
.anima .cambio figure{ border-radius:0; }
.anima .cambio__ahora{ position:absolute; inset:0; z-index:3; will-change:transform; }
.anima .cambio__vela{ position:absolute; inset:0; will-change:transform; }
.anima .cambio__vela img{ height:100%; }
.anima .cambio__ahora figcaption{ left:auto; right:1rem; }
@media (max-width:700px){ .cambio{ grid-template-columns:1fr; } .cambio img{ aspect-ratio:4/3; } .anima .cambio__vela img{ aspect-ratio:auto; } }

/* ---------- encargos ---------- */
.encargos{ position:relative; margin-top:clamp(4.5rem, 9vw, 8rem); min-height:min(92svh, 860px); display:flex; align-items:flex-end; justify-content:flex-end; padding:var(--lado); }
.encargos__foto{ position:absolute; inset:0; overflow:hidden; }
.encargos__foto img{ width:100%; height:118%; object-fit:cover; object-position:50% 40%; will-change:transform; }
.encargos__caja{ position:relative; max-width:460px; padding:clamp(1.6rem, 3vw, 2.4rem); border-radius:var(--r); background:var(--tinta); color:#fff; }
.encargos__caja h2{ font-size:clamp(1.9rem, 3vw, 2.6rem); line-height:1.05; letter-spacing:-.03em; }
.encargos__caja p{ margin:.8rem 0 1.5rem; color:#C9CED3; }
.encargos blockquote{ margin:1.6rem 0 0; padding-top:1.2rem; border-top:1px solid #2A323C; font-size:.95rem; color:#C9CED3; }
.encargos cite{ display:block; margin-top:.3rem; font-style:normal; color:#fff; font-size:.9rem; }
@media (max-width:700px){
  .encargos{ display:block; min-height:0; padding:0; }
  .encargos__foto{ position:relative; height:62svh; }
  .encargos__foto img{ height:115%; }
  .encargos__caja{ margin:-4.5rem var(--lado) 0; }
}

/* ---------- equipo ---------- */
.equipo{ background:var(--tinta); color:#fff; }
.equipo__dentro{ max-width:var(--ancho); margin:0 auto; padding:clamp(4.5rem, 9vw, 7.5rem) var(--lado); }
.equipo__intro{ margin:1.4rem 0 0; max-width:48ch; color:#B9BFC5; font-size:1.1rem; }
.equipo__rejilla{ margin-top:clamp(2.5rem, 5vw, 4rem); display:grid; grid-template-columns:300px 1fr; gap:2.5rem 5rem; align-items:start; }
.titular__foto{ border-radius:var(--r); overflow:hidden; }
.titular__foto img{ width:100%; aspect-ratio:1; object-fit:cover; }
.titular figcaption{ margin-top:1rem; color:#B9BFC5; }
.titular figcaption b{ display:block; color:#fff; font-weight:400; font-size:1.45rem; letter-spacing:-.01em; }
.equipo__lista{ list-style:none; margin:0; padding:0; border-top:1px solid #2A323C; }
.equipo__lista li{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; padding:1.05rem 0; border-bottom:1px solid #2A323C; }
.equipo__lista li span:first-child{ font-size:clamp(1.2rem, 1.9vw, 1.6rem); font-weight:300; letter-spacing:-.01em; }
.equipo__lista li span:last-child{ color:#9EA5AC; font-size:.93rem; text-align:right; }
.equipo__mostrador{ margin-top:clamp(3rem, 6vw, 5rem); border-radius:var(--r); overflow:hidden; transform:translateZ(0); }
.equipo__mostrador img{ width:100%; aspect-ratio:21/9; object-fit:cover; object-position:50% 62%; }
@media (max-width:820px){ .equipo__rejilla{ grid-template-columns:1fr; } .titular{ display:grid; grid-template-columns:120px 1fr; gap:1.2rem; align-items:center; }
  .titular figcaption{ margin:0; } .equipo__mostrador img{ aspect-ratio:4/3; } }
@media (max-width:480px){ .equipo__lista li{ flex-direction:column; gap:.1rem; } .equipo__lista li span:last-child{ text-align:left; } }

/* ---------- dónde estamos ---------- */
.visita{ max-width:none; background:var(--salvia); padding-bottom:clamp(4rem, 8vw, 6.5rem); }
.visita > *{ max-width:calc(var(--ancho) - 2 * var(--lado)); margin-left:auto; margin-right:auto; }
.visita > .mapa{ margin-top:clamp(2rem, 4vw, 3rem); }
.mapa{ position:relative; display:block; border-radius:var(--r); overflow:hidden; transform:translateZ(0); }
.mapa img{ width:100%; aspect-ratio:1600/560; object-fit:cover; transition:transform .7s var(--sale); }
.mapa:hover img{ transform:scale(1.02); }
.mapa__boton{ position:absolute; right:1rem; bottom:1rem; padding:.65rem 1.1rem; border-radius:999px; background:var(--tinta); color:#fff; font-size:.92rem; font-weight:500; }
.mapa__credito{ margin:.5rem 0 0; font-size:.78rem; color:var(--gris); }
.visita > .visita__datos{ margin-top:2.5rem; }
.visita__datos{ display:grid; grid-template-columns:repeat(3,1fr); gap:2rem 3rem; align-items:start; }
.visita h3{ font-size:.95rem; font-weight:500; margin-bottom:.8rem; }
.visita__datos p{ margin:0; line-height:1.7; }
.horario{ width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; margin-bottom:.9rem; }
.horario th, .horario td{ padding:.55rem 0; border-bottom:1px solid var(--linea); font-weight:400; text-align:left; }
.horario tr:first-child th, .horario tr:first-child td{ padding-top:0; }
.horario td{ text-align:right; }
.horario tr.es-hoy th, .horario tr.es-hoy td{ font-weight:500; }
.visita__contacto{ display:flex; flex-direction:column; gap:.4rem; }
.visita__contacto > a{ text-decoration:none; align-self:flex-start; border-bottom:1px solid var(--linea); }
.visita__contacto > a:hover{ border-bottom-color:var(--tinta); }
.visita__contacto .grande{ font-size:clamp(1.6rem, 2.6vw, 2.2rem); font-weight:300; letter-spacing:-.02em; border:0; margin-bottom:.3rem; }
.visita__contacto p{ margin-top:.5rem; }
@media (max-width:900px){ .visita__datos{ grid-template-columns:1fr 1fr; } .visita__contacto{ grid-column:1 / -1; } }
@media (max-width:600px){ .mapa img{ aspect-ratio:4/3; object-position:52% 50%; } .visita__datos{ grid-template-columns:1fr; } }

/* ---------- pie ---------- */
.pie{ background:#0B1015; color:#8D949B; padding:2.75rem var(--lado) 3rem; font-size:.86rem; }
.pie__dentro{ max-width:calc(var(--ancho) - 2 * var(--lado)); margin:0 auto; }
.pie img{ width:200px; margin-bottom:1.25rem; opacity:.85; }
.pie p{ margin:.35rem 0; }
.pie a{ color:#D4D8DC; }

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

@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }