/* ==========================================================================
   Clínica La Cruz (Peumo) · identidad visual de la demo
   Paleta muestreada (PIL) de su fachada y su logo (foto de perfil de Facebook, 1600 px):
   terracota #B13D2D / #9D342A (muros de la clínica) · vino #6E2A26 · carbón #2E2B2B (sello del logo)
   · crema #F8F1E7 · arena #EADCC8 · jacarandá #8E6BB8 (el árbol en flor frente a la fachada, solo acento).
   Tipografía: Lora itálica (como "Clínica La Cruz" del sello) + Karla para texto.
   Motivo: el sello circular "Odontología · Medicina · Desde 2013" y la cruz de trazo pincel.
   ========================================================================== */
@font-face{font-family:Lora;font-weight:500 700;font-display:swap;src:url(fonts/lora-500-700.woff2) format("woff2")}
@font-face{font-family:Lora;font-style:italic;font-weight:500 700;font-display:swap;src:url(fonts/lora-500-700-italic.woff2) format("woff2")}
@font-face{font-family:Karla;font-weight:400 700;font-display:swap;src:url(fonts/karla-400-700.woff2) format("woff2")}

:root{
  --terra:#B13D2D;--terra-600:#9D342A;--vino:#6E2A26;--carbon:#2E2B2B;--crema:#F8F1E7;--arena:#EADCC8;--jaca:#8E6BB8;
  --ink:#2E2B2B;--ink-2:#5A524D;--muted:#857A72;--line:#E8DCCB;
  --brand:var(--terra);--brand-2:var(--carbon);--brand-ink:#fff;--brand-soft:var(--crema);--bg:#fff;
  --font:Karla,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --tit:Lora,Georgia,serif;
  --r:6px;--sh:0 1px 2px rgba(46,43,43,.06),0 18px 40px -22px rgba(46,43,43,.35);
  --reserva-offset:74px;
}
html{scroll-padding-top:80px}
body{font-family:var(--font);color:var(--ink);background:var(--crema);overflow-x:clip}
img{height:auto;display:block}
h1,h2,h3,h4{font-family:var(--tit);color:var(--carbon);font-weight:600;letter-spacing:-.01em}
h1 em,h2 em{font-style:italic;color:var(--terra)}
.ic{width:20px;height:20px;flex:none}
.ante{display:inline-block;font:700 .74rem/1 var(--font);letter-spacing:.26em;text-transform:uppercase;color:var(--terra);margin-bottom:12px}
.ante.claro{color:#F0B9A9}

.franja{background:var(--carbon);color:#BDB2A8;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:4px;border:1.5px solid transparent;font:700 .98rem/1 var(--font);letter-spacing:.02em;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-terra{background:var(--terra);color:#fff}
.bt-terra:hover{background:var(--vino)}
.bt-crema{background:var(--crema);color:var(--carbon)}
.bt-crema:hover{background:#fff}
.bt-borde{background:transparent;border-color:var(--arena);color:var(--carbon)}
.bt-borde:hover{border-color:var(--terra)}
.bt-wa{background:#fff;border-color:var(--line);color:#1DA851;padding:0;width:56px;flex:none}
.bt-lg{min-height:56px;font-size:1.04rem;padding:0 28px}
.bt-sm{min-height:44px;padding:0 16px;font-size:.88rem}
.bt-link{display:inline-flex;align-items:center;gap:8px;color:var(--terra);font-weight:700;text-decoration:none;padding:8px 0}
.bt-link.claro{color:#fff}
.bt-link:hover{text-decoration:underline;text-underline-offset:4px}

/* Cabecera */
.cab{position:sticky;top:0;z-index:30;background:rgba(248,241,231,.94);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(--carbon)}
.marca img{height:34px;width:auto}
.marca span{display:flex;flex-direction:column;font:italic 600 1.22rem/1 var(--tit)}
.marca small{font:700 .58rem var(--font);letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-top:4px;font-style:normal}
.cab nav{display:none;margin-left:auto;gap:2px}
.cab nav a{color:var(--ink-2);text-decoration:none;font-weight:700;font-size:.92rem;padding:8px 14px;border-radius:4px}
.cab nav a:hover{background:var(--arena);color:var(--carbon)}
.cab .bt{margin-left:auto}
@media(min-width:960px){.cab nav{display:flex}.cab nav + .bt{margin-left:10px}}

/* Portada: panel crema sólido arriba (o a la izquierda); la fachada va debajo o al lado, nunca debajo del texto */
.puerta{display:flex;flex-direction:column;background:var(--crema);overflow:hidden}
.puerta-panel{padding:28px 18px 26px;background:var(--crema);color:var(--carbon)}
.puerta-sello{width:84px;height:auto;margin-bottom:14px}
.puerta-desde{margin:0 0 8px;font:700 .74rem/1 var(--font);letter-spacing:.22em;text-transform:uppercase;color:var(--terra)}
.puerta h1{color:var(--carbon);font-size:clamp(2.35rem,10vw,4rem);line-height:1.02;margin:0 0 10px;font-weight:600;max-width:12ch}
.puerta-em{margin:0 0 12px;font-family:var(--tit);font-style:italic;font-size:1.2rem;line-height:1.3;color:var(--terra);max-width:22ch}
.bajada{font-size:1.05rem;line-height:1.6;color:var(--ink-2);max-width:38rem;margin:0 0 18px}
.acciones{display:flex;flex-direction:column;align-items:stretch;gap:8px;margin-bottom:14px}
.acciones .bt{width:100%;min-height:52px}
.puerta .bt-link{color:var(--terra);min-height:44px}
.puerta-hora{display:flex;align-items:center;gap:8px;margin:0;font-weight:700;color:var(--vino);font-size:.95rem}
.puerta-hora .ic{color:var(--terra)}
.puerta-foto{margin:0;background:var(--vino)}
.puerta-foto img{width:100%;height:auto;aspect-ratio:1100/825;object-fit:cover;object-position:62% 48%;display:block}
@media(min-width:900px){
  .puerta{flex-direction:row;align-items:stretch;min-height:640px}
  .puerta-panel{flex:1 1 48%;padding:64px 48px;display:flex;flex-direction:column;justify-content:center}
  .puerta-sello{width:110px}
  .puerta h1{font-size:clamp(3rem,4vw,4.4rem)}
  .acciones{flex-direction:row;flex-wrap:wrap;align-items:center}
  .acciones .bt{width:auto}
  .puerta-foto{flex:1 1 52%}
  .puerta-foto img{height:100%;aspect-ratio:auto;min-height:640px;object-position:68% 42%}
}

/* Secciones */
.sec-lc{padding:64px 0}
.titulo{max-width:46rem;margin-bottom:30px}
.titulo.centro{text-align:center;margin-left:auto;margin-right:auto}
.sec-lc h2{font-size:clamp(1.8rem,6.4vw,2.8rem);line-height:1.1;margin:0 0 12px}
.titulo.fila{display:flex;flex-direction:column;gap:14px;max-width:none}
@media(min-width:700px){.titulo.fila{flex-direction:row;align-items:flex-end;justify-content:space-between}}

/* Áreas */
.areas-grid{display:grid;gap:16px}
.area{background:#fff;border:1px solid var(--line);border-top:4px solid var(--terra);border-radius:var(--r);padding:26px 22px}
.area .ic{width:34px;height:34px;color:var(--terra);margin-bottom:10px}
.area h3{font-size:1.5rem;margin:0 0 8px;font-style:italic}
.area p{color:var(--ink-2);margin:0 0 16px;line-height:1.6}
.chips-lc{display:flex;flex-wrap:wrap;gap:8px}
.chips-lc a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1.5px solid var(--arena);border-radius:99px;color:var(--carbon);text-decoration:none;font-weight:700;font-size:.9rem;transition:background .2s,border-color .2s,color .2s}
.chips-lc a:hover{background:var(--terra);border-color:var(--terra);color:#fff}
@media(min-width:900px){.areas-grid{grid-template-columns:repeat(3,1fr)}}

/* Equipo */
.equipo{background:var(--terra);color:#F7E2D9}
.equipo h2{color:#fff}.equipo h2 em{color:#FFD3C4}
.eq-grid{display:grid;gap:30px;align-items:center}
.eq-foto{margin:0;border:8px solid #fff;box-shadow:0 30px 60px -30px rgba(0,0,0,.6);rotate:-1.5deg;max-width:480px}
.eq-foto img{width:100%}
.equipo p{font-size:1.04rem;line-height:1.65;max-width:36rem;margin:0 0 22px}
@media(min-width:900px){.eq-grid{grid-template-columns:.9fr 1.1fr;gap:64px}}

/* Niños */
.ninos-grid{display:grid;gap:30px;align-items:center}
.ninos p{color:var(--ink-2);font-size:1.04rem;line-height:1.6}
.dm{margin:20px 0 24px;background:#fff;border-radius:18px 18px 18px 4px;padding:18px 20px;box-shadow:var(--sh);position:relative}
.dm p{margin:0 0 8px;color:var(--carbon);font-size:1rem}
.dm cite{font-style:normal;font-size:.8rem;color:var(--terra);font-weight:700}
.ninos-fotos{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ninos-fotos img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r)}
.ninos-fotos img:last-child{margin-top:48px}
@media(min-width:900px){.ninos-grid{grid-template-columns:1fr 1fr;gap:64px}}

/* Piezas */
.piezas{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.piezas-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.piezas-grid a{position:relative;display:block;border-radius:var(--r);overflow:hidden;text-decoration:none}
.piezas-grid img{width:100%;aspect-ratio:1;object-fit:cover;transition:transform .3s}
.piezas-grid a:hover img{transform:scale(1.04)}
.piezas-grid span{position:absolute;left:8px;bottom:8px;background:var(--carbon);color:#fff;font-weight:700;font-size:.78rem;padding:4px 10px;border-radius:99px}

/* Sedes */
.sedes-grid{display:grid;gap:20px}
.sede{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.sede-mapa{position:relative}
.sede-mapa>img{width:100%;aspect-ratio:7/5;object-fit:cover}
.pin{position:absolute;left:50%;top:50%;transform:translate(-50%,-100%);width:60px;height:60px;border-radius:50% 50% 50% 0;rotate:-45deg;background:var(--terra);display:grid;place-items:center;box-shadow:0 10px 24px rgba(0,0,0,.3)}
.pin img{width:34px;rotate:45deg}
.osm{position:absolute;right:8px;bottom:6px;font-size:.66rem;color:var(--vino);background:rgba(255,255,255,.75);padding:1px 6px;border-radius:6px}
.sede-txt{padding:20px 22px 24px}
.sede h3{font-size:1.4rem;font-style:italic;margin:0 0 4px}
.sede-txt>p{margin:0 0 6px;color:var(--ink-2)}
.nota-h{display:flex;gap:8px;align-items:flex-start;font-size:.92rem;background:var(--crema);border:1px dashed var(--arena);border-radius:var(--r);padding:10px 12px;margin:12px 0 16px!important}
.nota-h .ic{color:var(--terra);margin-top:1px}
.sede-acc{display:flex;flex-wrap:wrap;gap:10px}
.sede-foto{width:100%;aspect-ratio:7/5;object-fit:cover}
@media(min-width:900px){.sedes-grid{grid-template-columns:1.25fr 1fr;align-items:start}}

/* Contacto y reserva (#reservar): punto único, aquí se integra la agenda de Catapaz */
.reserva-caja{position:relative;background:var(--arena);border-radius:12px;padding:34px 20px 26px;overflow:hidden}
.reserva-cruz{position:absolute;right:-30px;top:-20px;width:260px;opacity:.12;pointer-events:none}
.reserva-bloque{position:relative}
.reserva-txt h2{font-size:clamp(2rem,8vw,3.1rem);line-height:1.06;margin:6px 0 14px;max-width:13ch;font-weight:500}
.reserva-txt h2 em{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(--carbon)}
.reserva-pasos li::before{background:var(--terra);color:#fff;font:italic 600 .95rem var(--tit)}
.agenda-tarjeta{background:#fff;border-radius:10px;border:1px solid var(--line);box-shadow:0 1px 2px rgba(46,43,43,.05),0 26px 60px -26px rgba(110,42,38,.4)}
.reserva-alt{color:var(--ink-2)}
.reserva-alt a{color:var(--terra);font-weight:700;text-decoration:none}
@media(min-width:900px){.reserva-caja{padding:64px 60px 54px}}

/* Pie */
.pie{background:var(--carbon);color:#C9BCB1;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:100px}
.pie h4{color:#F0B9A9;font:italic 600 1rem var(--tit);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:#9B8F86}
@media(min-width:900px){.pie{padding-bottom:40px}.pie-grid{grid-template-columns:.8fr 1fr 1fr 1.3fr}.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(248,241,231,0),rgba(248,241,231,.96) 30%)}
.barra .bt-terra{flex:1}
@media(min-width:900px){.barra{display:none}}