/* ==========================================================================
   Farmacia Veterinaria El Manzano · identidad visual de la demo
   Paleta muestreada (PIL) de su logo (foto de perfil de Facebook, 2048 px) y su local:
   verde bosque #1E3B30 (piezas FB) · hoja #2E6B4F/#3F8A5E (copa del manzano) · manzana coral #E4574A
   · tinta #241F1F (animales y texto del logo) · papel crema #F7F3EA · salvia #E6EEE6.
   Tipografía: Oswald (condensada en mayúsculas, como "FARMACIA VETERINARIA / EL MANZANO") + Lato.
   Motivo: fotos reales de sus pacientes (Instagram @veterinariaelmanzano) y la manzana del logo.
   ========================================================================== */
@font-face{font-family:Oswald;font-weight:500 700;font-display:swap;src:url(fonts/oswald-500-700.woff2) format("woff2")}
@font-face{font-family:Lato;font-weight:400;font-display:swap;src:url(fonts/lato-400.woff2) format("woff2")}
@font-face{font-family:Lato;font-weight:700;font-display:swap;src:url(fonts/lato-700.woff2) format("woff2")}
@font-face{font-family:Lato;font-weight:900;font-display:swap;src:url(fonts/lato-900.woff2) format("woff2")}

:root{
  --bosque:#1E3B30;--bosque-2:#16302A;--hoja:#2E6B4F;--hoja-2:#3F8A5E;--manzana:#E4574A;--manzana-2:#C9443A;
  --tinta:#241F1F;--papel:#F7F3EA;--salvia:#E6EEE6;--salvia-2:#D3E1D4;
  --ink:#1F2B26;--ink-2:#46564E;--muted:#6D7C74;--line:#E2DDD0;
  --brand:var(--hoja);--brand-2:var(--bosque);--brand-ink:#fff;--brand-soft:var(--salvia);--bg:var(--papel);
  --font:Lato,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --tit:Oswald,"Arial Narrow",system-ui,sans-serif;
  --r:20px;--sh:0 1px 2px rgba(30,59,48,.06),0 14px 34px -14px rgba(30,59,48,.25);
  --reserva-offset:74px;
}
html{scroll-padding-top:80px}
body{font-family:var(--font);color:var(--ink);background:var(--papel);overflow-x:clip}
img{height:auto;display:block}
h1,h2,h3,h4{font-family:var(--tit);color:var(--bosque);font-weight:700;letter-spacing:.005em;text-transform:uppercase}
.ic{width:20px;height:20px;flex:none}
.rojo{color:var(--manzana)}.verde{color:var(--hoja-2)}.rojo-claro{color:#FF8F7F}
.ante{display:inline-flex;align-items:center;gap:8px;font:600 .82rem/1 var(--tit);letter-spacing:.16em;text-transform:uppercase;color:var(--hoja-2);margin-bottom:10px}
.ante::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--manzana)}
.ante.claro{color:#B9D6C1}

.franja{background:var(--tinta);color:#BFB8B0;font-size:.72rem;padding:5px 0}
.franja b{color:#fff}
@media(max-width:600px){.franja-larga{display:none}}

/* Botones */
.bt{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border-radius:99px;border:2px solid transparent;font:600 1rem/1 var(--tit);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:transform .12s,background .2s;white-space:nowrap}
.bt:active{transform:scale(.98)}
.bt .ic{transition:transform .2s}.bt:hover .ic{transform:translateX(3px)}
.bt-verde{background:var(--hoja);color:#fff;box-shadow:0 12px 24px -12px rgba(46,107,79,.9)}
.bt-verde:hover{background:var(--bosque)}
.bt-manzana{background:var(--manzana);color:#fff}
.bt-manzana:hover{background:var(--manzana-2)}
.bt-borde{background:transparent;border-color:var(--salvia-2);color:var(--bosque)}
.bt-borde:hover{border-color:var(--hoja)}
.bt-wa{background:#fff;border-color:var(--line);color:#1DA851;padding:0;width:56px;flex:none}
.bt-lg{min-height:56px;font-size:1.06rem;padding:0 28px}
.bt-sm{min-height:40px;padding:0 16px;font-size:.86rem}
.bt-link{display:inline-flex;align-items:center;gap:8px;color:var(--hoja);font-weight:700;text-decoration:none;padding:8px 0}
.bt-link:hover{text-decoration:underline;text-underline-offset:4px}

/* Cabecera */
.cab{position:sticky;top:0;z-index:30;background:rgba(247,243,234,.93);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.cab .wrap{display:flex;align-items:center;gap:12px;height:64px}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--tinta)}
.marca img{height:40px;width:auto}
.marca span{display:flex;flex-direction:column;font:500 .62rem/1.1 var(--tit);letter-spacing:.14em;text-transform:uppercase}
.marca b{font:700 1.18rem/1 var(--tit);letter-spacing:.02em}
.cab nav{display:none;margin-left:auto;gap:2px}
.cab nav a{color:var(--ink-2);text-decoration:none;font:500 .9rem var(--tit);letter-spacing:.08em;text-transform:uppercase;padding:8px 12px;border-radius:99px}
.cab nav a:hover{background:var(--salvia);color:var(--bosque)}
.cab .bt{margin-left:auto}
@media(min-width:960px){.cab nav{display:flex}.cab nav + .bt{margin-left:10px}}

/* Portada: foto real de un paciente a sangre + panel sólido (tinta) con el texto. Sin círculos.
   Móvil: foto a todo el ancho y el panel se apoya encima como una tarjeta (nombre + H1 + reserva en el primer pantallazo).
   Escritorio: foto grande a la izquierda, panel que la monta por abajo a la derecha y una foto chica "pegada" encima. */
.portada{position:relative;padding:0 0 34px;background:var(--papel)}
.portada-grid{position:relative}
.portada-foto{position:relative;margin:0;height:clamp(290px,44svh,430px);overflow:hidden;background:var(--salvia)}
.portada-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.portada-foto figcaption{display:none}
.estado{position:absolute;left:14px;top:14px;z-index:2;display:inline-flex;align-items:center;gap:8px;margin:0;font-size:.8rem;font-weight:700;background:rgba(255,255,255,.94);padding:6px 13px 6px 11px;border-radius:99px;color:var(--bosque);box-shadow:0 6px 18px -8px rgba(0,0,0,.35)}
.estado i{width:8px;height:8px;border-radius:50%;background:var(--hoja-2);box-shadow:0 0 0 4px rgba(63,138,94,.2)}
.estado.cerrado i{background:var(--manzana);box-shadow:0 0 0 4px rgba(228,87,74,.2)}
.portada-snap{display:none}
.portada-panel{position:relative;z-index:2;margin:-36px 10px 0;background:var(--tinta);color:#D9D2C8;border-radius:26px;padding:20px 20px 24px;box-shadow:0 24px 50px -24px rgba(36,31,31,.7)}
.portada-nombre{display:flex;align-items:center;gap:8px;margin:0 0 10px;font:600 .8rem/1.2 var(--tit);letter-spacing:.14em;text-transform:uppercase;color:#B9D6C1}
.portada-nombre svg{width:22px;height:22px;flex:none;color:var(--manzana)}
.portada h1{font-size:clamp(2.2rem,9.4vw,3.9rem);line-height:.98;margin:0 0 18px;color:#fff}
.portada h1 span{display:block;color:#FF8F7F}
.portada .acciones{gap:4px 20px}
.portada .acciones .bt{flex:1 1 100%}
.bt-link.claro{color:#9FD3B0}
.bajada{font-size:1rem;line-height:1.6;color:#CFC8BE;max-width:34rem;margin:16px 0 0}
.acciones{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px}
.sellos{list-style:none;padding:0;margin:18px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.sellos li{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:99px;padding:7px 13px;font-weight:700;font-size:.86rem;color:#fff}
.sellos .ic{width:18px;height:18px;color:#FF8F7F}
@media(min-width:600px){.portada .acciones .bt{flex:0 0 auto}.portada-panel{margin:-48px 18px 0;padding:26px 28px 28px}}
@media(min-width:900px){
  .portada{padding:36px 0 96px}
  .portada-grid{max-width:1120px;margin:0 auto;padding:0 18px;display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:1fr auto}
  .portada-foto{grid-column:1/9;grid-row:1/3;height:auto;min-height:640px;border-radius:30px;box-shadow:0 30px 60px -30px rgba(30,59,48,.55)}
  .portada-foto img{position:absolute;inset:0;object-position:50% 45%}
  .portada-foto figcaption{display:block;position:absolute;left:18px;bottom:18px}
  .estado{left:18px;top:18px}
  .portada-snap{display:block;grid-column:10/13;grid-row:1;align-self:start;justify-self:center;position:relative;z-index:3;width:178px;margin:-8px 0 0;padding:8px 8px 0;background:#fff;border-radius:6px;rotate:5deg;box-shadow:0 18px 34px -16px rgba(36,31,31,.5)}
  .portada-snap img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:3px}
  .portada-snap::after{content:"";display:block;height:26px}
  .portada-panel{grid-column:7/13;grid-row:2;margin:0 0 -56px;padding:36px 36px 34px;border-radius:30px}
  .portada h1{font-size:3.15rem}
}

/* Pie de foto tipo etiqueta, sobre la imagen */
.portada-foto figcaption,.mosaico figcaption,.dom-foto figcaption{position:absolute;left:8px;bottom:8px;max-width:calc(100% - 16px);margin:0;background:rgba(247,243,234,.94);color:var(--bosque);font:600 .72rem/1.2 var(--tit);letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;border-radius:10px}

/* Pacientes: mosaico de fotos reales de su Instagram */
.pacientes{padding-top:36px}
.mosaico{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:86px;gap:8px;
  grid-template-areas:"van van" "van van" "van van" "gato boxer" "gato boxer" "gato sb" "gato sb" "chq pastor" "chq pastor" "chq pastor" "danes ig" "danes ig"}
.mosaico figure{position:relative;margin:0;border-radius:18px;overflow:hidden;background:var(--salvia)}
.mosaico img{width:100%;height:100%;object-fit:cover}
.p-van{grid-area:van}.p-van img{object-position:50% 70%}
.p-gato{grid-area:gato}.p-gato img{object-position:50% 30%}
.p-boxer{grid-area:boxer}.p-boxer img{object-position:50% 18%}
.p-sb{grid-area:sb}.p-sb img{object-position:50% 30%}
.p-chaqueta{grid-area:chq}.p-chaqueta img{object-position:50% 10%}
.p-pastor{grid-area:pastor}.p-pastor img{object-position:50% 35%}
.p-danes{grid-area:danes}.p-danes img{object-position:50% 25%}
.p-ig{grid-area:ig;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;padding:14px;border-radius:18px;background:var(--bosque);color:#fff;text-decoration:none}
.p-ig .ic{width:28px;height:28px;color:#FF8F7F;margin-bottom:auto}
.p-ig b{font:600 1rem/1.1 var(--tit);letter-spacing:.04em;text-transform:uppercase}
.p-ig span{font-size:.78rem;color:#B9D6C1;overflow-wrap:anywhere}
.p-ig:hover{background:var(--hoja)}
@media(min-width:900px){
  .pacientes{padding-top:70px}
  .mosaico{grid-template-columns:repeat(4,1fr);grid-auto-rows:150px;gap:12px;
    grid-template-rows:repeat(4,150px) auto;
    grid-template-areas:"van van gato boxer" "van van gato boxer" "sb chq danes pastor" "sb chq danes pastor" "ig ig ig ig"}
  .mosaico figure,.p-ig{border-radius:22px}
  .p-ig{flex-direction:row;align-items:center;justify-content:flex-start;gap:14px;padding:18px 24px}
  .p-ig .ic{margin:0}
  .p-ig span{margin-left:auto;font-size:.9rem}
}

/* Secciones */
.sec-em{padding:60px 0}
.titulo{max-width:44rem;margin-bottom:28px}
.sec-em h2{font-size:clamp(1.8rem,6.5vw,2.8rem);line-height:1.04;margin:0 0 12px}
.titulo p{color:var(--ink-2);font-size:1.03rem}

/* Servicios */
.servicios{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.serv-grid{display:grid;gap:14px}
.serv{position:relative;display:flex;flex-direction:column;background:var(--papel);border:1px solid var(--line);border-radius:var(--r);padding:22px 20px;text-decoration:none;color:inherit;transition:transform .15s,box-shadow .2s,border-color .2s;overflow:hidden}
.serv::after{content:"";position:absolute;right:-26px;top:-26px;width:84px;height:84px;border-radius:50%;background:var(--salvia)}
.serv:hover{transform:translateY(-3px);box-shadow:var(--sh);border-color:var(--salvia-2)}
.serv-n{position:relative;z-index:1;font:700 .8rem var(--tit);color:var(--manzana);letter-spacing:.12em}
.serv h3{font-size:1.3rem;margin:6px 0 6px}
.serv p{color:var(--ink-2);margin:0 0 14px;flex:1}
.serv b{display:inline-flex;align-items:center;gap:6px;font:600 .86rem var(--tit);letter-spacing:.1em;text-transform:uppercase;color:var(--hoja)}
.farmacia{display:flex;gap:10px;align-items:flex-start;margin:22px 0 0;padding:16px 18px;background:var(--salvia);border-radius:16px;color:var(--bosque)}
.farmacia .ic{color:var(--hoja);margin-top:2px}
@media(min-width:700px){.serv-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.serv-grid{grid-template-columns:repeat(3,1fr)}}

/* A domicilio */
.domicilio{background:var(--bosque);color:#D6E6DA;position:relative;overflow:hidden}
.domicilio h2{color:#fff}
.dom-grid{display:grid;gap:34px}
.dom-txt>p{font-size:1.04rem;line-height:1.6;max-width:36rem}
.dom-lista{list-style:none;padding:0;margin:20px 0 24px;display:grid;gap:14px}
.dom-lista li{display:flex;gap:14px;align-items:flex-start;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:14px 16px}
.dom-lista .ic{width:28px;height:28px;color:#FF8F7F;margin-top:2px}
.dom-lista b{display:block;color:#fff;font-size:1.04rem}
.dom-lista span{font-size:.94rem}
.proposito{margin:26px 0 0;font:500 1.3rem/1.3 var(--tit);text-transform:uppercase;color:#fff;border-left:4px solid var(--manzana);padding-left:16px}
.proposito cite{display:block;margin-top:6px;font:italic 400 .9rem var(--font);text-transform:none;color:#B9D6C1}
.dom-piezas{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-self:center}
.dom-piezas img{width:100%;border-radius:18px;box-shadow:0 20px 40px -20px rgba(0,0,0,.6)}
.dom-foto{position:relative;grid-row:1/3;margin:0;border-radius:18px;overflow:hidden;box-shadow:0 20px 40px -20px rgba(0,0,0,.6)}
.dom-foto img{height:100%;object-fit:cover;object-position:8% 70%;border-radius:0;box-shadow:none}
.dom-foto figcaption{top:8px;bottom:auto}
@media(min-width:900px){.dom-grid{grid-template-columns:1fr 1fr;gap:60px;align-items:center}}

/* Galería del local */
.galeria{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.galeria figure{margin:0;border-radius:18px;overflow:hidden}
.galeria img{width:100%;height:100%;object-fit:cover}
.g-a{grid-column:1/-1;aspect-ratio:4/3}.g-b{grid-column:1/-1;aspect-ratio:16/10}.g-c,.g-d{aspect-ratio:1}.g-e{grid-column:1/-1;aspect-ratio:16/10}
@media(min-width:900px){.galeria{grid-template-columns:repeat(4,1fr);grid-auto-rows:190px}.galeria figure{aspect-ratio:auto!important}
.g-a{grid-column:1/3;grid-row:1/3}.g-b{grid-column:3/5;grid-row:1/2}.g-c{grid-column:3/4;grid-row:2/3}.g-d{grid-column:4/5;grid-row:2/3}.g-e{display:none}}

/* Aviso educativo */
.aviso{background:#fff;border-top:1px solid var(--line)}
.aviso-grid{display:grid;gap:26px;align-items:center}
.aviso-grid img{width:100%;max-width:360px;border-radius:20px;box-shadow:var(--sh)}
.aviso-grid p{color:var(--ink-2);font-size:1.03rem;line-height:1.6;max-width:40rem}
@media(min-width:800px){.aviso-grid{grid-template-columns:360px 1fr;gap:56px}}

/* Opiniones */
.opiniones{background:var(--tinta);color:#E9E3DA}
.citas{display:grid;gap:14px;margin-top:6px}
.citas blockquote{margin:0;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:20px}
.citas p{margin:0 0 10px;font-size:1.04rem;line-height:1.55}
.citas cite{font-style:normal;font-size:.8rem;color:#FF8F7F}
@media(min-width:900px){.citas{grid-template-columns:repeat(3,1fr)}}

/* Ubicación */
.ubi-grid{display:grid;gap:26px}
.ubi-mapa{position:relative;border-radius:50% 50% var(--r) var(--r)/34% 34% var(--r) var(--r);overflow:hidden;box-shadow:var(--sh)}
.ubi-mapa>img{width:100%;aspect-ratio:7/5;object-fit:cover}
.pin{position:absolute;left:50%;top:50%;transform:translate(-50%,-100%);width:62px;height:62px;border-radius:50% 50% 50% 0;rotate:-45deg;background:#fff;display:grid;place-items:center;box-shadow:0 10px 24px rgba(0,0,0,.3)}
.pin svg{width:40px;height:40px;rotate:45deg;color:var(--manzana)}
.osm{position:absolute;right:8px;bottom:6px;font-size:.66rem;color:var(--bosque);background:rgba(255,255,255,.75);padding:1px 6px;border-radius:6px}
.dir{color:var(--ink-2);margin-top:-6px}
.horario{width:100%;border-collapse:collapse;margin:14px 0 20px;font-size:.95rem}
.horario th{text-align:left;font-weight:700;padding:8px 10px;width:40%}
.horario td{padding:8px 10px;color:var(--ink-2)}
.horario tr{border-bottom:1px solid var(--line)}
.horario .cerr{color:var(--muted)}
.horario tr.hoy{background:var(--salvia)}
.horario tr.hoy th::after{content:"hoy";margin-left:8px;font:600 .7rem var(--tit);color:#fff;background:var(--manzana);padding:2px 8px;border-radius:99px;text-transform:uppercase;letter-spacing:.08em}
.ubi-acc{display:flex;flex-wrap:wrap;gap:10px}
@media(min-width:900px){.ubi-grid{grid-template-columns:1.1fr .9fr;align-items:center;gap:56px}}

/* Contacto y reserva (#reservar): punto único, aquí se integra la agenda de Catapaz */
.reserva-caja{position:relative;background:var(--salvia);border-radius:34px;padding:34px 20px 26px;overflow:hidden}
.reserva-arbol{position:absolute;right:-40px;bottom:-30px;width:300px;opacity:.12;pointer-events:none}
.reserva-bloque{position:relative}
.reserva-txt h2{font-size:clamp(2rem,8vw,3.2rem);line-height:1;margin:6px 0 14px;max-width:14ch}
.reserva-txt h2 .rojo{display:block}
.reserva-frase{color:var(--ink-2);font-size:1.03rem;line-height:1.6;max-width:36ch;margin:0 0 20px}
.reserva-pasos li{font-weight:700;color:var(--bosque)}
.reserva-pasos li::before{background:var(--manzana);color:#fff;font:700 .9rem var(--tit)}
.agenda-tarjeta{background:#fff;border-radius:24px;border:1px solid var(--salvia-2);box-shadow:0 1px 2px rgba(30,59,48,.05),0 26px 60px -26px rgba(30,59,48,.4)}
.reserva-alt{color:var(--ink-2)}
.reserva-alt a{color:var(--hoja);font-weight:700;text-decoration:none}
@media(min-width:900px){.reserva-caja{padding:64px 60px 54px}}

/* Pie */
.pie{background:var(--bosque-2);color:#B9D6C1;margin-top:60px;padding:40px 0 calc(110px + var(--safe-b));font-size:.9rem}
.pie-grid{display:grid;gap:22px;grid-template-columns:1fr 1fr}
.pie-marca{grid-column:1/-1}
.pie-marca img{width:120px}
.pie h4{color:#FF8F7F;font:600 .76rem var(--tit);letter-spacing:.18em;text-transform:uppercase;margin:0 0 6px}
.pie p{margin:0 0 6px;line-height:1.55}
.pie a{color:#fff;text-decoration:none}
.aviso-pie{margin-top:22px;padding-top:16px;border-top:1px solid rgba(255,255,255,.12);font-size:.74rem;color:#8FB39A}
@media(min-width:900px){.pie{padding-bottom:40px}.pie-grid{grid-template-columns:1fr 1fr 1.4fr 1.2fr}.pie-marca{grid-column:auto}}

/* Barra móvil */
.barra{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;gap:10px;padding:10px 14px calc(10px + var(--safe-b));background:linear-gradient(rgba(247,243,234,0),rgba(247,243,234,.96) 30%)}
.barra .bt-verde{flex:1}
@media(min-width:900px){.barra{display:none}}

/* Entrada directa con …#reservar: saltar sin animación (la página es larga y el scroll suave tardaba en llegar) */
html:has(#reservar:target){scroll-behavior:auto}