/* Tema de la clínica, dirección A «Rosa boutique» (Agatha, elegida por Martin el 30/10/2026): el sitio del kit con la marca
   bien puesta. El rosado C|W #FE9FAD es el color de la casa (botones, rótulos, bloques), los fondos alternan blanco y rubor
   y las tarjetas son más grandes y suaves. Misma estructura y misma letra. Contraste: texto #231F20 sobre #FE9FAD = 8,4:1. */
:root { --rosa: #FE9FAD; --rosa-2: #FDBAC4; --rubor: #FCEFF1; --cal: #FFFDFD; --radio: 24px; }
body { background: var(--cal); }

/* botones: rosado con texto oscuro */
.boton { background: var(--rosa); color: #231F20; border-radius: 999px; font-weight: 600; }
.boton:hover { background: var(--rosa-2); }
.boton-linea { background: transparent; }
.boton-linea:hover { background: var(--rubor); }
.portada .boton-claro, .agendar .boton-claro { background: rgba(255,255,255,.12); color: #fff; }

/* portada: degradado más corto, el rostro respira */
.portada::after { background: linear-gradient(to top, rgba(35,31,32,.88) 0%, rgba(35,31,32,.35) 34%, rgba(35,31,32,0) 55%) !important; }
.portada h1 { letter-spacing: -.045em; }
.portada h1::after { content: ""; display: block; width: 3.2rem; height: 4px; border-radius: 4px; background: var(--rosa); margin-top: 1rem; }

/* franja de confianza en rubor */
.confianza { background: var(--rubor); color: #231F20; border: 0; }
.confianza b { color: #8C3F4D; }

/* rótulos: rosado oscuro, mayúscula chica */
.rotulo { color: #8C3F4D; text-transform: uppercase; letter-spacing: .14em; font-size: .74rem; font-weight: 600; }
.rotulo::before { background: var(--rosa) !important; }

/* bloques que alternan */
#ofertas, #opiniones { background: var(--rubor); }
#ofertas .cifra-caja { background: linear-gradient(150deg, #FE9FAD 0%, #F7C3CB 100%); color: #231F20; box-shadow: 0 30px 60px -30px rgba(140,63,77,.45); }
#ofertas .cifra-caja b { color: #231F20; }
#ofertas .cifra-caja span { color: #4D4547; }
#ofertas .cifra-caja .boton { background: #231F20; color: #fff; }
.mini-tarjetas li { background: #fff; border-radius: 16px; }
.promo-chips .boton.en-carro { background: #231F20; color: #fff; }

/* tarjetas de tratamiento: foto más alta, sin borde, sombra suave */
.tarjeta-trat { border-radius: var(--radio); border: 0; box-shadow: 0 18px 40px -26px rgba(35,31,32,.35); overflow: hidden; }
.tarjeta-trat .tp-foto img { aspect-ratio: 4 / 3; }
.tt-cuerpo { padding: 1.4rem 1.4rem 1.5rem; }
.tt-nombre { font-weight: 600; }
.tp-ver { justify-self: start; background: var(--rubor); color: #8C3F4D; border-radius: 999px; padding: .35rem .8rem; font-weight: 600; }

/* ficha */
.banner-liso { background: linear-gradient(160deg, #3A3236 0%, #5A4B51 100%); }
.ficha-caja { border-radius: var(--radio); box-shadow: 0 24px 50px -32px rgba(35,31,32,.4); border-top: 6px solid var(--rosa); }
.trat-ficha .mini-tarjetas li { background: var(--rubor); }
.checklist svg { color: #8C3F4D; }

/* la foto de la doctora en «Quiénes te atienden» viene a 272 px: que no se agrande */
.plantel.n1 .persona img { max-width: 272px; }

/* Fichas pro (30/10/2026): el producto y la sesión llevan foto de la marca; la sesión la pone a la izquierda para alternar. */
#producto figure img,#sesion figure img{width:100%;height:auto;border-radius:var(--radio);box-shadow:0 18px 40px -24px rgba(35,31,32,.35)}
#producto{background:var(--rubor)}
@media (min-width:56rem){#sesion .envoltura.dos>figure{order:-1}}
/* Valor de la tarjeta junto a «Ver el tratamiento» (scripts/armar.py) */
.tt-pie { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .4rem 1rem; margin-top: .6rem; }
.tt-pie .tp-ver { margin-top: 0; }
.tt-precio { font: 600 1.1rem/1.2 var(--display); color: var(--tinta); }
/* Casos de la portada en carrusel (scripts/armar.py; referencia drasierralta.com) */
#casos .envoltura.dos { display: block; }
#casos .envoltura.dos > .sube:first-child { max-width: 44rem; margin-bottom: 1.6rem; }
.casos-carrusel { position: relative; }
.casos-fila { list-style: none; margin: 0; padding: .3rem .2rem 1.4rem; display: grid; grid-auto-flow: column; grid-auto-columns: min(82vw, 26rem);
  gap: 1.1rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.casos-fila::-webkit-scrollbar { display: none; }
.casos-fila li { scroll-snap-align: start; }
.caso { display: grid; gap: .5rem; height: 100%; text-decoration: none; color: inherit; background: #fff; border-radius: var(--radio); overflow: hidden;
  box-shadow: 0 18px 40px -26px rgba(35,31,32,.35); padding-bottom: 1.2rem; }
.caso-foto img { display: block; width: 100%; aspect-ratio: 1058 / 700; object-fit: cover; }
.caso-nombre { font: 600 1.25rem/1.15 var(--display); padding: .5rem 1.2rem 0; }
.caso-pie { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; padding: 0 1.2rem; }
.caso-pie .tp-ver { margin-top: 0; }
.casos-flecha { position: absolute; top: 38%; width: 2.8rem; height: 2.8rem; border-radius: 50%; border: 0; background: #fff; color: #231F20;
  font-size: 1.2rem; box-shadow: 0 8px 24px -10px rgba(35,31,32,.45); cursor: pointer; }
.casos-flecha.atras { left: -.6rem; } .casos-flecha.adelante { right: -.6rem; }
@media (max-width: 48rem) { .casos-flecha { display: none; } }

/* ── Opción 4 «Mezcla» (la que eligió la Dra., grupo 01/11/2026 15:24), sobre la base rosa de arriba ──────────────────────────
   Colores de drasierralta.com (tinta casi negra, beige y bronce), opiniones de Google arriba y tarjetas limpias. Lo que ella pidió
   cambiar: «los botones de agendar color rosado» (quedan en #FE9FAD con texto oscuro, 8,4:1) y la barra «arma tu promo» en negro
   (#131718 con texto blanco, 18:1). Es la demo /demo-colores-d con b.css + comun.css + d.css, sin el rosa negro de b.css. */
:root { --tinta: #131718; --cal: #FFFFFF; --cal-2: #F4F0EB; --rubor: #F4F0EB; --linea: #E6DED4; --acento-texto: #7A5F43; }
.boton-linea { color: #131718; border-color: #131718; } .boton-linea:hover { background: #F4F0EB; }
.rotulo { color: #7A5F43; } .rotulo::before { background: #B39678 !important; }
.portada h1::after { background: #B39678; }
.confianza { background: #131718; color: #fff; } .confianza b { color: #D9C2A5; }
.confianza .google { display: inline-flex; align-items: center; gap: .45rem; }
.confianza .estrellas { color: #F4B400; letter-spacing: .08em; font-size: 1rem; }
#ofertas, #opiniones { background: #F4F0EB; }
#casos { background: #fff; }
#ofertas .cifra-caja { background: linear-gradient(150deg, #E9DCCB 0%, #D9C2A5 100%); box-shadow: 0 30px 60px -30px rgba(122,95,67,.45); }
#ofertas .cifra-caja .boton { background: var(--rosa); color: #231F20; }
.tp-ver { color: #7A5F43 !important; }
.tt-pie .tp-ver, .caso-pie .tp-ver { background: #F4F0EB !important; }
.tarjeta-trat, .caso { box-shadow: none; border: 1px solid #E6DED4; }
.banner-liso { background: linear-gradient(160deg, #131718 0%, #2B3133 100%); }
.ficha-caja { border-top-color: #B39678; }
.trat-ficha .mini-tarjetas li { background: #F4F0EB; }
.checklist svg { color: #7A5F43; }
#opiniones h2 { font-size: clamp(2rem, 4vw, 3rem); }
#opiniones { padding-top: clamp(3rem, 6vw, 5rem) !important; }
/* barra de promo arriba (solo en la portada) */
.aviso-top { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: 2.2rem; display: flex; align-items: center; justify-content: center;
  background: #131718; color: #fff; text-align: center; font: 500 .85rem/1.3 var(--display); padding: 0 1rem; letter-spacing: .02em; }
.aviso-top a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
body:has(.aviso-top) header.barra { top: 2.2rem !important; }
/* tres accesos con foto, como Sierralta */
.accesos { padding-block: 2.4rem; }
.accesos ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.accesos a { position: relative; display: grid; gap: .3rem; min-height: 13rem; padding: 0; overflow: hidden; border-radius: var(--radio); text-decoration: none;
  background: #131718; color: #fff; align-content: end; }
.accesos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.accesos a::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(19,23,24,.85), rgba(19,23,24,.1) 70%); z-index: 1; }
.accesos b, .accesos span { position: relative; z-index: 2; color: #fff; padding-inline: 1.3rem; }
.accesos b { font: 600 1.15rem/1.2 var(--display); }
.accesos b::after { content: " →"; color: #D9C2A5; }
.accesos span { padding-bottom: 1.2rem; font: 400 .95rem/1.4 var(--texto); color: rgba(255,255,255,.88); }
@media (max-width: 48rem) { .accesos ul { grid-template-columns: 1fr; gap: .7rem; } .accesos a { min-height: 9.5rem; } }
/* sobre la foto de portada y la franja final oscura, los botones de borde van en blanco */
.portada .boton-linea, .postal-cta .boton-linea { background: transparent; color: #fff; border-color: rgba(255,255,255,.75); }
.portada .boton-linea:hover { background: rgba(255,255,255,.12); }