/* Farmacia Soler · Torrevieja. Paleta de su emblema: verde botella, oro y crema. Montserrat es la letra de su logo;
   Libre Caslon Display, la de los títulos (botica). */
@font-face{ font-family:"Montserrat"; src:url("../fonts/montserrat.woff2") format("woff2"); font-weight:300 900; font-display:swap; }
@font-face{ font-family:"Caslon"; src:url("../fonts/caslon-display.woff2") format("woff2"); font-weight:400; font-display:swap; }

:root{
  --crema:#f3eee3; --papel:#faf7f0; --verde:#1b3324; --verde-2:#24412f; --canto:#0c160f;
  --oro:#c9b27a; --oro-texto:#7c6732; --tinta:#1c211d; --gris:#535a54; --linea:rgba(28,33,29,.16);
  --sans:"Montserrat", system-ui, sans-serif; --serif:"Caslon", Georgia, serif;
  --nav-h:68px; --gutter:clamp(18px, 4vw, 56px); --seccion:clamp(72px, 10vw, 140px);
}
*{ box-sizing:border-box; }
html{ background:var(--crema); -webkit-text-size-adjust:100%; }
html, body{ overflow-x:clip; }
body{ margin:0; background:var(--crema); color:var(--tinta); font:400 1rem/1.6 var(--sans); }
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; }
h1, h2, h3{ margin:0; font-weight:400; text-wrap:balance; }
h2{ font-family:var(--serif); font-size:clamp(2rem, 4.2vw, 3.6rem); line-height:1.05; letter-spacing:-.01em; }
h3{ font-family:var(--serif); font-size:clamp(1.6rem, 2.6vw, 2.3rem); line-height:1.1; }
p{ margin:0; text-wrap:pretty; }
.enlace{ text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:1px; }
.enlace:hover{ color:var(--oro-texto); }
:focus-visible{ outline:2px solid var(--oro-texto); 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(--verde); background:var(--verde); color:var(--crema);
  font-family:var(--sans); 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(--verde); }
.boton--linea{ background:transparent; color:var(--verde); }
.boton--linea:hover{ background:var(--verde); color:var(--crema); }
.boton--claro{ background:transparent; border-color:rgba(243,238,227,.7); color:var(--crema); }
.boton--claro:hover{ background:var(--crema); border-color:var(--crema); color:var(--verde); }
.boton--nav{ padding:.8em 1.4em; font-size:.7rem; }

/* ---------- su emblema */
.em-canto{ fill:var(--canto); }
.em-verde{ fill:var(--verde); }
.em-banda{ fill:none; stroke:var(--oro); stroke-width:5; stroke-linejoin:miter; }
.em-filete{ fill:none; stroke:var(--oro); stroke-width:1.6; stroke-linejoin:miter; }
.em-sol, .em-caduceo, .em-oro{ fill:var(--oro); }
.em-est{ font-family:var(--serif); font-size:9.6px; letter-spacing:.06em; fill:var(--oro); }
.firma{ display:flex; flex-direction:column; align-items:center; font-family:var(--sans); text-transform:uppercase; line-height:1; color:var(--tinta); }
.firma__farmacia{ font-weight:300; font-size:var(--f1, 1.9rem); letter-spacing:.06em; }
.firma__soler{ font-weight:600; font-size:calc(var(--f1, 1.9rem) * 1.52); letter-spacing:.035em; margin-top:.08em; }
.firma__linea{ position:relative; display:block; width:calc(var(--f1, 1.9rem) * 6.4); height:2px; margin-top:calc(var(--f1, 1.9rem) * .42); }
.firma__linea::before, .firma__linea::after{ content:""; position:absolute; top:50%; height:1px; width:calc(50% - 9px); background:currentColor; }
.firma__linea::before{ left:0; } .firma__linea::after{ right:0; }
.firma__linea i{ position:absolute; left:50%; top:50%; width:7px; height:7px; background:currentColor; transform:translate(-50%, -50%) rotate(45deg); }

/* ---------- precarga: un velo crema; el logo de la portada se dibuja en el centro y viaja a su sitio */
.velo{ position:fixed; inset:0; z-index:60; background:var(--crema); pointer-events:none; display:none; }
html.anima .velo{ display:block; }
html.anima:not(.lista) .marca{ position:relative; z-index:61; }
html.anima .marca .em-banda, html.anima .marca .em-filete{ stroke-dasharray:1 1; stroke-dashoffset:1; }
html.anima .marca .em-canto, html.anima .marca .em-verde, html.anima .marca .em-sol, html.anima .marca .em-caduceo, html.anima .marca .em-est,
html.anima .firma > span, 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(243,238,227,.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-weight:600; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; margin-right:auto; }
.nav__cruz{ width:30px; height:30px; }
.nav__enlaces{ display:flex; align-items:center; gap:clamp(16px, 2.4vw, 34px); }
.nav__enlaces a{ text-decoration:none; font-size:.86rem; font-weight:500; }
.nav__enlaces a:hover{ color:var(--oro-texto); }
.nav__enlaces .nav__llamar{ font-weight:600; font-variant-numeric:tabular-nums; }
.nav__abrir{ display:none; }

/* ---------- portada: el emblema en el crema y, al lado, sus rincones fundiéndose */
.portada{ display:grid; grid-template-columns:1fr minmax(0, .92fr); min-height:100svh; }
.portada__marca{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(30px, 5vh, 56px); padding:calc(var(--nav-h) + 28px) var(--gutter) 40px; }
.marca{ display:flex; flex-direction:column; align-items:center; gap:clamp(18px, 2.4vh, 28px); --f1:clamp(1.6rem, 2.6vw, 2.4rem); }
.portada__emblema{ width:clamp(200px, 23vw, 340px); height:auto; overflow:visible; }
.portada__ficha{ text-align:center; display:grid; gap:6px; color:var(--gris); font-size:.95rem; }
.hoy{ color:var(--tinta); font-weight:600; }
.portada__botones{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:16px; }
.portada__fotos{ position:relative; overflow:hidden; background:var(--verde); }
.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; }

/* ---------- las cuatro áreas: cada brazo de la cruz se abre a su rincón */
.areas{ background:var(--verde); color:var(--crema); }
.areas__fijo{ min-height:100svh; display:flex; flex-direction:column; justify-content:center; gap:clamp(24px, 4vh, 48px); padding:calc(var(--nav-h) + 24px) var(--gutter) 40px; }
.areas h2{ max-width:18ch; }
.areas__escena{ display:grid; grid-template-columns:min(46vw, 64svh) 1fr; align-items:center; gap:clamp(32px, 6vw, 96px); }
.areas__cruz{ width:100%; height:auto; overflow:visible; }
.areas .em-verde{ fill:#14281b; }
.brazo{ opacity:0; }
.areas__textos{ position:relative; min-height:16rem; }
.area{ position:absolute; inset:0 0 auto; display:grid; gap:14px; max-width:30rem; opacity:0; transform:translateY(14px); transition:opacity .22s ease, transform .22s ease; }
.area[data-activa]{ opacity:1; transform:none; transition:opacity .5s ease .2s, transform .5s ease .2s; }
.area p{ color:rgba(243,238,227,.86); font-size:1.05rem; }
.area .area__pie{ font-size:.84rem; color:var(--oro); }
html:not(.anima) .brazo, html:not(.js) .brazo{ opacity:1; }
html:not(.anima) .area, html:not(.js) .area{ position:static; opacity:1; transform:none; }
html:not(.anima) .areas__textos{ display:grid; gap:34px; }

/* ---------- la farmacia */
.farmacia{ display:grid; grid-template-columns:minmax(0, .8fr) 1fr; gap:clamp(32px, 6vw, 96px); align-items:center; padding:var(--seccion) var(--gutter); }
.farmacia__foto{ margin:0; aspect-ratio:4/5; overflow:hidden; }
.farmacia__foto img{ width:100%; height:100%; object-fit:cover; }
.farmacia__texto{ display:grid; gap:26px; max-width:36rem; }
.farmacia blockquote{ margin:0; font-family:var(--serif); font-size:clamp(1.3rem, 2vw, 1.75rem); line-height:1.35; }
.farmacia__firma{ color:var(--gris); font-size:.9rem; }

/* ---------- el test de la silla */
.silla{ display:grid; grid-template-columns:1fr minmax(0, .7fr); background:var(--verde); color:var(--crema); }
.silla__foto{ margin:0; grid-column:2; grid-row:1; aspect-ratio:4/5; overflow:hidden; }
.silla__foto img{ width:100%; height:100%; object-fit:cover; }
.silla__texto{ grid-column:1; grid-row:1; align-self:center; display:grid; gap:22px; max-width:34rem; padding:var(--seccion) var(--gutter); }
.silla__texto p{ color:rgba(243,238,227,.86); }

/* ---------- visítanos */
.visitanos{ padding:var(--seccion) var(--gutter) calc(var(--seccion) * .8); display:grid; gap:clamp(30px, 4vw, 48px); }
.mapa{ position:relative; display:block; overflow:hidden; aspect-ratio:1600/640; }
.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(--verde); border:3px solid #fff; box-shadow:0 0 0 7px rgba(27,51,36,.22); }
.mapa__osm{ position:absolute; right:8px; bottom:6px; font-size:.68rem; background:rgba(255,255,255,.85); padding:2px 6px; }
.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; }
.horario{ margin:0; display:grid; gap:2px; }
.horario div{ display:flex; justify-content:space-between; gap:16px; padding:10px 0; border-bottom:1px solid var(--linea); }
.horario dt{ font-weight:500; } .horario dd{ margin:0; color:var(--gris); font-variant-numeric:tabular-nums; text-align:right; }
.horario div[data-hoy] dt, .horario div[data-hoy] dd{ color:var(--tinta); font-weight:600; }
.visitanos__contacto{ display:grid; gap:12px; }
.visitanos__contacto p + p{ margin-top:0; }
.visitanos__guardia{ font-size:.9rem; }

/* ---------- pie */
.pie{ background:var(--canto); color:rgba(243,238,227,.8); display:flex; gap:clamp(24px, 4vw, 48px); align-items:center; padding:48px var(--gutter) calc(48px + env(safe-area-inset-bottom)); font-size:.86rem; }
.pie__emblema{ width:104px; flex:none; }
.pie__datos{ display:grid; gap:6px; }
.pie strong{ color:var(--crema); font-weight:600; }
.pie__legal{ display:flex; flex-wrap:wrap; gap:18px; margin-top:8px; }
.pie__legal a{ color:var(--oro); text-decoration:none; }

.subir{ position:fixed; right:18px; bottom:18px; z-index:35; width:46px; height:46px; border-radius:50%; border:0; background:var(--verde); color:var(--crema); 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:60px; }
  .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(--crema); 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; }
  .portada__marca{ padding:calc(var(--nav-h) + 36px) var(--gutter) 40px; }
  .marca{ --f1:clamp(1.35rem, 6.6vw, 1.8rem); }
  .portada__emblema{ width:min(48vw, 230px); }
  .portada__fotos{ aspect-ratio:4/5; }

  .areas__fijo{ justify-content:flex-start; gap:22px; padding-top:calc(var(--nav-h) + 22px); }
  .areas h2{ font-size:clamp(1.7rem, 7.4vw, 2.4rem); }
  .areas__escena{ grid-template-columns:1fr; gap:22px; justify-items:center; }
  .areas__cruz{ width:min(78vw, 46svh); }
  .areas__textos{ width:100%; min-height:12.5rem; }
  .area p{ font-size:.98rem; }

  .farmacia{ grid-template-columns:1fr; }
  .farmacia__foto{ aspect-ratio:4/3; }
  .silla{ grid-template-columns:1fr; }
  .silla__foto{ grid-column:1; grid-row:1; aspect-ratio:4/3; }
  .silla__texto{ grid-row:2; }
  .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__emblema{ width:84px; }
}
@media (max-width:420px){ .boton--nav{ padding:.75em 1.1em; letter-spacing:.12em; } }