/* ui.css — navegación (menú desplegable + hamburguesa) y animaciones.
   Archivo aditivo: no modifica tokens.css ni styles.css, se carga después.
   Mismo archivo en las 3 páginas del sitio. */

:root{
  --v4-nav-h:60px;
  --v4-ease-lux:cubic-bezier(.22,.61,.36,1);
}

/* ============================================================
   1. NAV — base mobile (hamburguesa)
   ============================================================ */

.v4-nav__brand{display:block;}

.v4-burger{
  display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;padding:11px;margin:0;flex-shrink:0;
  background:transparent;border:1px solid var(--v4-line);border-radius:var(--v4-r);
  cursor:pointer;
}
.v4-burger:hover{border-color:var(--v4-gold-soft);}
.v4-burger span{
  display:block;height:1px;width:100%;background:var(--v4-cream);
  transition:transform .4s var(--v4-ease-lux),opacity .25s ease;
}
.v4-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.v4-burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.v4-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

.v4-menu__list{margin:0;padding:0;list-style:none;}
.v4-menu__item{position:relative;}

.v4-menu__link{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 0;background:transparent;border:0;
  font-family:var(--v4-sans);font-size:var(--v4-fs-micro);font-weight:400;
  letter-spacing:var(--v4-ls-micro);text-transform:uppercase;
  color:var(--v4-muted);cursor:pointer;transition:color .3s ease;
}
.v4-menu__link:hover,.v4-menu__link:focus-visible{color:var(--v4-gold-soft);}
.v4-menu__link[aria-current="page"]{color:var(--v4-cream);}
.v4-menu__chev{width:9px;height:9px;fill:currentColor;flex-shrink:0;transition:transform .35s var(--v4-ease-lux);}
.v4-menu__toggle[aria-expanded="true"] .v4-menu__chev{transform:rotate(180deg);}

.v4-menu__sub{margin:0;padding:0;list-style:none;}
.v4-menu__sublink{
  display:flex;flex-direction:column;gap:3px;padding:12px 14px;
  transition:background .3s ease;
}
.v4-menu__sublink strong{
  font-family:var(--v4-serif);font-size:1rem;font-weight:400;color:var(--v4-cream);
}
.v4-menu__sublink small{
  font-size:var(--v4-fs-micro);letter-spacing:var(--v4-ls-micro);
  text-transform:uppercase;color:var(--v4-gold-soft);
}
.v4-menu__sublink:hover{background:rgba(223,174,94,.08);}
.v4-menu__sublink[aria-current="page"]{background:rgba(223,174,94,.06);}
.v4-menu__sublink[aria-current="page"] small{color:var(--v4-muted-2);}

/* --- Drawer mobile (< 900px) --- */
@media (max-width:899px){
  /* Ojo: .v4-nav usa backdrop-filter, y eso lo convierte en el bloque
     contenedor de sus hijos posicionados — un position:fixed acá NO se mide
     contra la ventana sino contra el nav (quedaba un panel de 61px de alto).
     Por eso el panel se ancla al nav con absolute + alto explícito. */
  .v4-menu{
    position:absolute;left:0;right:0;top:100%;z-index:120;
    height:calc(100vh - var(--v4-nav-h));
    height:calc(100dvh - var(--v4-nav-h));
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    margin:0;padding:20px var(--v4-gutter) 40px;
    /* Fondo sólido, no translúcido: el contenido de atrás no debe leerse
       a través del panel. Sin backdrop-filter — sobre un fondo opaco no se
       ve y solo cuesta render. */
    background:var(--v4-bg);
    border-top:1px solid var(--v4-line);
    overflow-y:auto;overscroll-behavior:contain;
    opacity:0;visibility:hidden;transform:translateY(-10px);
    transition:opacity .35s ease,transform .4s var(--v4-ease-lux),visibility .35s;
  }
  .v4-menu.is-open{opacity:1;visibility:visible;transform:none;}

  .v4-menu__list{display:flex;flex-direction:column;width:100%;}
  .v4-menu__item{border-bottom:1px solid var(--v4-line);}
  .v4-menu__link{
    width:100%;justify-content:space-between;
    min-height:56px;padding:14px 2px;
    font-size:.8rem;color:var(--v4-cream);
  }
  .v4-menu.is-open .v4-menu__item{animation:v4MenuIn .5s var(--v4-ease-lux) backwards;}
  .v4-menu.is-open .v4-menu__item:nth-child(1){animation-delay:.06s;}
  .v4-menu.is-open .v4-menu__item:nth-child(2){animation-delay:.11s;}
  .v4-menu.is-open .v4-menu__item:nth-child(3){animation-delay:.16s;}
  .v4-menu.is-open .v4-menu__item:nth-child(4){animation-delay:.21s;}
  .v4-menu.is-open .v4-menu__item:nth-child(5){animation-delay:.26s;}
  .v4-menu.is-open .v4-menu__cta{animation:v4MenuIn .5s var(--v4-ease-lux) .32s backwards;}

  .v4-menu__sub{
    max-height:0;overflow:hidden;
    margin:0 0 0 2px;padding-left:12px;border-left:1px solid var(--v4-line);
    transition:max-height .45s var(--v4-ease-lux);
  }
  .v4-menu__sub.is-open{max-height:360px;}
  .v4-menu__sublink{padding:12px 10px;min-height:48px;justify-content:center;}

  .v4-menu__cta{margin-top:28px;width:100%;}

  body.is-menu-open{overflow:hidden;}
}

@keyframes v4MenuIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}

/* --- Barra horizontal desktop (>= 900px) --- */
@media (min-width:900px){
  .v4-burger{display:none;}
  .v4-menu{display:flex;align-items:center;gap:30px;margin-left:auto;}
  .v4-menu__list{display:flex;align-items:center;gap:30px;}

  /* puente invisible: evita que el submenú se cierre al bajar el mouse */
  .v4-menu__item--has-sub::after{content:"";position:absolute;left:0;right:0;top:100%;height:18px;}

  .v4-menu__sub{
    position:absolute;top:calc(100% + 18px);left:-18px;z-index:130;
    min-width:270px;padding:8px;
    background:var(--v4-bg-2);border:1px solid var(--v4-line);
    box-shadow:0 26px 50px rgba(0,0,0,.55);
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .3s ease,transform .35s var(--v4-ease-lux),visibility .3s;
  }
  .v4-menu__item--has-sub:hover .v4-menu__sub,
  .v4-menu__item--has-sub:focus-within .v4-menu__sub,
  .v4-menu__sub.is-open{opacity:1;visibility:visible;transform:translateY(0);}
}

/* ============================================================
   2. ANIMACIONES — entrada al hacer scroll
   Solo se activan si el JS corrió (html.js-anim): si el JS falla,
   nada queda invisible.
   ============================================================ */

html.js-anim [data-reveal]{opacity:0;transform:translateY(22px);}
html.js-anim [data-reveal].is-in{
  opacity:1;transform:none;
  transition:opacity .85s var(--v4-ease-lux),transform .95s var(--v4-ease-lux);
  transition-delay:calc(var(--d,0) * 85ms);
}

/* ============================================================
   3. MICRO-INTERACCIONES — hover luxury
   ============================================================ */

/* Contador: ancho estable mientras cuenta, sin saltos */
.v4-stat__val{font-variant-numeric:tabular-nums;}

/* Precio dentro de la card de tratamiento. Va acá (y no en styles.css) para
   que también aplique en la landing de carillas, que tiene su propio
   styles.css y no lo incluye. */
.v4-card__price{margin:0 0 14px;font-family:var(--v4-serif);font-size:1.05rem;color:var(--v4-gold-soft);}

/* Utilidad: centra texto solo en desktop, deja mobile como esté (heredado,
   normalmente izquierda). Pensada para kicker+h2 de intro que arriba de
   un bloque ya centrado (ej. .v4-pricing con margin-inline:auto) se ven
   descolgados a la izquierda en pantallas anchas. */
@media (min-width:768px){
  .v4-center-lg{text-align:center;}
}

/* Grilla de beneficios: reemplaza un <ul class="v4-list"> de una sola
   columna con max-width angosto, que en desktop (container de hasta
   1140px) dejaba media pantalla vacía a la derecha. 1 columna en mobile,
   2 en desktop, cada ítem con ícono — mismo criterio que el resto del
   sitio de usar el ancho del container en vez de un bloque de texto
   flotando a la izquierda. */
.v4-benefits{display:grid;grid-template-columns:1fr;gap:16px 40px;margin-top:32px;}
@media (min-width:768px){
  .v4-benefits{grid-template-columns:1fr 1fr;max-width:820px;}
}
.v4-benefits__item{display:flex;align-items:flex-start;gap:12px;}
.v4-benefits__icon{flex-shrink:0;margin-top:2px;fill:var(--v4-gold);}
.v4-benefits__item span{font-size:var(--v4-fs-body);color:var(--v4-muted);line-height:1.5;}

/* Split de dos columnas (foto + texto): solo existe en el styles.css propio
   de veneers-in-medellin, no en el tokens.css/styles.css compartido del
   home ni de whitening. Se replica acá para poder usar el mismo patrón de
   "foto a la izquierda, texto a la derecha" en cualquier página. */
.v4-split{text-align:left;}
.v4-split__media img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:top center;border-radius:var(--v4-r);}
.v4-split__media--wide img{aspect-ratio:4/3;object-position:center;}
.v4-split__body{margin-top:28px;}
@media (min-width:768px){
  .v4-split{display:grid;grid-template-columns:minmax(0,44%) minmax(0,48%);justify-content:space-between;align-items:center;}
  .v4-split__body{margin-top:0;}
  .v4-split--flip .v4-split__media{order:2;}
}

/* Badge de confianza flotante sobre .v4-split__media: pensado para fotos de
   retrato que dejan espacio muerto abajo (foto de cintura para arriba,
   fondo oscuro que se funde con el de la página). "Corta" el borde
   inferior de la foto en vez de dejar hueco. Reutiliza el mismo dato de
   reseñas de Google ya verificado en la sección de reseñas de la página
   (no es un componente nuevo de datos, solo de layout). Opcional: solo
   aparece si se agrega el HTML de .v4-split__trust dentro de .v4-split__media. */
.v4-split__media{position:relative;}
.v4-split__trust{
  position:absolute;left:20px;right:20px;bottom:-24px;z-index:5;
  padding:14px 18px;
  background:var(--v4-bg-2);border:1px solid var(--v4-line);
  border-radius:var(--v4-r);box-shadow:0 20px 40px rgba(0,0,0,.5);
}
.v4-split__trust-stars{display:flex;gap:2px;fill:#FBBC05;margin-bottom:6px;}
.v4-split__trust-rating{margin:0;font-family:var(--v4-serif);font-size:1.05rem;color:var(--v4-cream);}
.v4-split__trust-rating span{font-family:var(--v4-sans);font-size:var(--v4-fs-micro);letter-spacing:var(--v4-ls-micro);text-transform:uppercase;color:var(--v4-muted);margin-left:4px;}
@media (min-width:768px){
  .v4-split__trust{right:auto;max-width:230px;bottom:-28px;}
}
/* Deja lugar debajo de la foto en mobile (donde media y body se apilan)
   para que el badge, que sobresale del borde inferior, no tape el texto. */
.v4-split--has-trust .v4-split__body{margin-top:64px;}
@media (min-width:768px){
  .v4-split--has-trust .v4-split__body{margin-top:0;}
}

/* Grilla de tratamientos: tokens.css la arma como grid "pegado" (gap:1px,
   borde único alrededor) pensado para compartir líneas entre celdas. Acá la
   separamos y le damos esquinas redondeadas a cada card, mismo tratamiento
   visual que las cajas de .v4-step en "how it works". */
.v4-cardgrid{gap:20px;border:0;background:transparent;}
@media (min-width:768px){.v4-cardgrid{gap:24px;}}

/* Tarjetas de tratamiento: zoom lento de la foto + filo dorado */
.v4-card{
  position:relative;overflow:hidden;transition:background .5s ease;
  border:1px solid var(--v4-line);border-radius:12px;
}
.v4-card__img{transition:transform 1.2s var(--v4-ease-lux);}
.v4-card:hover .v4-card__img{transform:scale(1.06);}

/* Variante de tarjeta con ícono en vez de foto: sin bloque tipo imagen, el
   ícono va chico y suelto arriba del cuerpo, mismo criterio minimal que
   .v4-benefits__icon (línea, no relleno grande) en vez de simular una foto. */
.v4-card--icon .v4-card__body{padding-top:32px;}
.v4-card__icon{
  display:block;width:34px;height:34px;margin-bottom:20px;
  fill:var(--v4-gold);transition:transform .6s var(--v4-ease-lux);
}
.v4-card--icon:hover .v4-card__icon{transform:scale(1.12);}
.v4-card::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--v4-gold),transparent);
  transform:scaleX(0);transition:transform .7s var(--v4-ease-lux);
}
.v4-card:hover::after{transform:scaleX(1);}

/* Pasos y tarjetas de precio: elevación sutil */
.v4-step,.v4-price-card{transition:transform .5s var(--v4-ease-lux),border-color .5s ease,box-shadow .5s ease;}
.v4-step:hover,.v4-price-card:hover{
  transform:translateY(-5px);border-color:var(--v4-gold-soft);
  box-shadow:0 18px 40px rgba(0,0,0,.4);
}

/* Reseñas: elevación mínima, no compiten con el carrusel */
.v4-review{transition:transform .45s var(--v4-ease-lux),box-shadow .45s ease;}
.v4-review:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(0,0,0,.3);}

/* Botón sólido: barrido de luz al pasar el mouse */
.v4-btn{position:relative;overflow:hidden;}
.v4-btn--solid::after{
  content:"";position:absolute;top:0;left:-140%;width:55%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  transform:skewX(-18deg);pointer-events:none;
}
.v4-btn--solid:hover::after{animation:v4Sheen .9s var(--v4-ease-lux);}
@keyframes v4Sheen{from{left:-140%;}to{left:160%;}}

/* Links de texto: subrayado dorado que se despliega */
.v4-link{position:relative;transition:color .3s ease;}
.v4-link::after{
  content:"";position:absolute;left:0;bottom:-5px;width:100%;height:1px;
  background:var(--v4-gold);transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--v4-ease-lux);
}
.v4-link:hover{color:var(--v4-gold);}
.v4-link:hover::after{transform:scaleX(1);}

/* Cruz de cerrar del lightbox: el dibujo queda igual, pero el área que
   responde al dedo pasa de 43x40 al mínimo táctil recomendado de 48px. */
.v4-lightbox__close{
  display:flex;align-items:center;justify-content:center;
  min-width:48px;min-height:48px;
}

/* ============================================================
   3b. VIDEO DEL HERO
   ============================================================ */

/* Cada página estiliza su propio hero en su styles.css, pero apuntando a
   distinto elemento: la home a `.v4-hero__media img` y carillas a
   `.v4-hero__media video`. Al poner también un video en la home, esas
   reglas no le aplicaban y quedaba a tamaño nativo (720x1280, rompía el
   layout). Se centraliza acá el tratamiento del video del hero — mismos
   valores que ya tenía carillas — para que las dos se vean igual. */
.v4-hero__media video{width:100%;height:auto;object-fit:cover;object-position:center;opacity:.9;}
@media (min-width:768px){
  .v4-hero__media video{
    height:100%;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 22%,#000 78%,transparent 100%),linear-gradient(180deg,#000 60%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0%,#000 22%,#000 78%,transparent 100%),linear-gradient(180deg,#000 60%,transparent 100%);
  }
}

/* Home: la ventana de video quedaba fija en 520px (mismo valor que
   carillas), pero el video de la home (720x1280, muy vertical) tiene
   texto grabado cerca del borde inferior que a esa altura se cortaba. En
   vez de subir el número fijo (se hubiera vuelto a quedar corto o largo
   según cuánto texto entre en la columna 1 en cada ancho de pantalla), el
   video se saca del flujo (position:absolute+inset:0) para que la caja de
   media no tenga alto propio; con align-items:stretch la fila del grid
   queda regida solo por la altura natural de la columna de texto, y el
   video ocupa esa altura completa siempre, sin importar cuánto mida el
   texto. Opt-in con .v4-hero--fit-media — solo la home lo usa hoy, no
   afecta a carillas ni whitening aunque este archivo sea el mismo en las
   3 páginas. */
@media (min-width:768px){
  .v4-hero--fit-media .v4-hero__inner{align-items:stretch;}
  .v4-hero--fit-media .v4-hero__media{height:auto;}
  .v4-hero--fit-media .v4-hero__media video{position:absolute;inset:0;width:100%;height:100%;}
}

/* Video abierto: panel CONTENIDO, no una toma de pantalla completa. El
   lightbox se comparte con la galería de fotos (que sí abre inmersiva, a
   96% de opacidad), por eso esto cuelga de un modificador que ui.js pone
   solo al abrir desde el video y saca al cerrar. */
.v4-lightbox--video .v4-lightbox__overlay{background:rgba(12,10,8,.72);}
.v4-lightbox--video .v4-lightbox__vid{
  max-width:min(90vw,380px);
  max-height:76vh;
  border:1px solid var(--v4-line);
  border-radius:var(--v4-r);
  box-shadow:0 30px 80px rgba(0,0,0,.65);
}

/* Botón de cerrar arriba a la IZQUIERDA (el base va arriba a la derecha),
   redondo y con fondo propio para que se lea sobre cualquier frame del
   video — mismo lenguaje visual que las flechas .v4-lightbox__nav. */
.v4-lightbox--video .v4-lightbox__close{
  top:20px;left:20px;right:auto;
  width:48px;height:48px;padding:0;
  font-size:1.9rem;
  color:var(--v4-cream);
  background:rgba(12,10,8,.75);
  border:1px solid var(--v4-line);
  border-radius:50%;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
.v4-lightbox--video .v4-lightbox__close:hover{
  color:var(--v4-gold-soft);
  border-color:var(--v4-gold-soft);
  background:var(--v4-bg);
}

/* FAQ: la respuesta se despliega en vez de aparecer de golpe */
.v4-faq summary{transition:color .3s ease;}
.v4-faq summary:hover{color:var(--v4-gold-soft);}
html.js-anim .v4-faq details[open] .v4-faq__a{animation:v4FaqIn .45s var(--v4-ease-lux);}
@keyframes v4FaqIn{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}

/* ============================================================
   4. Accesibilidad — respetar prefers-reduced-motion
   ============================================================ */

@media (prefers-reduced-motion:reduce){
  html.js-anim [data-reveal]{opacity:1;transform:none;}
  .v4-card:hover .v4-card__img,
  .v4-step:hover,.v4-price-card:hover,.v4-review:hover{transform:none;}
  .v4-btn--solid:hover::after{animation:none;}
  .v4-menu.is-open .v4-menu__item,
  .v4-menu.is-open .v4-menu__cta{animation:none;}
  html.js-anim .v4-faq details[open] .v4-faq__a{animation:none;}
}

/* ============================================================
   5. Agregados 2026-08-18 (reunión con la Dra.)
   ============================================================
   Todo opt-in: sin la clase o el atributo correspondiente en el HTML,
   estas reglas no afectan a ninguna página. Por eso este archivo sigue
   siendo idéntico en las 4 páginas y se sincroniza con `cp`. */

/* 5.1 Proceso de 4 pasos
   tokens.css fija `.v4-steps{grid-template-columns:repeat(5,1fr)}` desde
   768px. La landing de blanqueamiento pasó a 4 pasos, y sin esto la fila
   dejaba una columna vacía a la derecha en desktop. */
@media (min-width:768px){
  .v4-steps--4{grid-template-columns:repeat(4,1fr);}
}

/* 5.2 Cotizador por unidad (coronas)
   La Dra. pidió que coronas NO se venda por paquete cerrado como carillas
   —casi nadie necesita la boca entera— sino con precio por unidad y un
   contador para que el paciente arme su propio presupuesto. */
.v4-quoter-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
  margin-top:48px;
  align-items:start;
}
@media (min-width:900px){
  .v4-quoter-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;}
}

.v4-quoter{
  position:relative;
  display:flex;
  flex-direction:column;
  padding:40px 26px 28px;
  border:1px solid var(--v4-gold);
  border-radius:var(--v4-r);
  background:var(--v4-bg);
  text-align:left;
}
.v4-quoter>.v4-badge{position:absolute;top:-13px;left:24px;background:var(--v4-bg);}
.v4-quoter__title{
  margin:0 0 4px;
  font-family:var(--v4-serif);
  font-size:1.25rem;
  font-weight:400;
  color:var(--v4-cream);
}
.v4-quoter__sub{margin:0 0 20px;font-size:var(--v4-fs-sm);color:var(--v4-muted);}
.v4-quoter__unit{
  margin-bottom:20px;
  padding-bottom:20px;
  border-bottom:1px solid var(--v4-line);
  font-family:var(--v4-serif);
  font-size:2.1rem;
  line-height:1;
  color:var(--v4-cream);
}
.v4-quoter__unit small{
  font-family:var(--v4-sans);
  font-size:.75rem;
  letter-spacing:1px;
  color:var(--v4-muted-2);
}

.v4-quoter__label{
  display:block;
  margin-bottom:12px;
  font-size:var(--v4-fs-micro);
  letter-spacing:var(--v4-ls-micro);
  text-transform:uppercase;
  color:var(--v4-gold-soft);
}
.v4-counter{
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:24px;
}
.v4-counter__btn{
  flex:0 0 auto;
  width:48px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:1px solid var(--v4-line);
  border-radius:var(--v4-r);
  background:transparent;
  color:var(--v4-cream);
  font-family:var(--v4-sans);
  font-size:1.4rem;
  line-height:1;
  cursor:pointer;
  transition:border-color .3s ease,color .3s ease,background .3s ease;
}
.v4-counter__btn:hover:not(:disabled){
  border-color:var(--v4-gold-soft);
  color:var(--v4-gold-soft);
}
.v4-counter__btn:disabled{opacity:.3;cursor:not-allowed;}
.v4-counter__val{
  flex:1 1 auto;
  min-width:0;
  text-align:center;
  font-family:var(--v4-serif);
  font-size:1.6rem;
  line-height:48px;
  color:var(--v4-cream);
  font-variant-numeric:tabular-nums;
}
.v4-counter__val small{
  display:block;
  margin-top:-10px;
  font-family:var(--v4-sans);
  font-size:var(--v4-fs-micro);
  letter-spacing:var(--v4-ls-micro);
  text-transform:uppercase;
  color:var(--v4-muted-2);
}

.v4-quoter__total{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
  padding-top:20px;
  border-top:1px solid var(--v4-line);
}
.v4-quoter__total-lbl{
  font-size:var(--v4-fs-micro);
  letter-spacing:var(--v4-ls-micro);
  text-transform:uppercase;
  color:var(--v4-muted-2);
}
.v4-quoter__total-val{
  font-family:var(--v4-serif);
  font-size:1.8rem;
  line-height:1;
  color:var(--v4-gold);
  font-variant-numeric:tabular-nums;
}
.v4-quoter__note{margin:0 0 24px;font-size:var(--v4-fs-micro);line-height:1.6;color:var(--v4-muted-2);text-transform:none;letter-spacing:0;}
.v4-quoter .v4-btn{width:100%;margin-top:auto;}

/* 5.3 Bloque de auto-diagnóstico ("¿cómo sé si necesito una corona?")
   La Dra. pidió expresamente que estos dos criterios vayan junto al precio,
   no enterrados en el FAQ: son los que separan a un paciente de corona de
   uno de carilla. */
.v4-check{
  padding:32px 26px;
  border:1px solid var(--v4-line);
  border-radius:var(--v4-r);
  background:var(--v4-bg-2);
  text-align:left;
}
.v4-check__title{
  margin:0 0 20px;
  font-family:var(--v4-serif);
  font-size:1.15rem;
  font-weight:400;
  color:var(--v4-cream);
}
.v4-check__list{margin:0 0 20px;padding:0;list-style:none;}
.v4-check__item{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin-bottom:16px;
  font-size:var(--v4-fs-sm);
  line-height:1.6;
  color:var(--v4-cream);
}
.v4-check__item svg{flex:0 0 auto;margin-top:3px;fill:var(--v4-gold);}
.v4-check__foot{
  margin:0;
  padding-top:18px;
  border-top:1px solid var(--v4-line);
  font-size:var(--v4-fs-sm);
  line-height:1.7;
  color:var(--v4-muted);
}

/* 5.4 Comparativa corona vs carilla
   Dos columnas enfrentadas: "a veces la gente se confunde" (la Dra.). */
.v4-compare{
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
  margin-top:40px;
}
@media (min-width:768px){
  .v4-compare{grid-template-columns:repeat(2,1fr);gap:24px;}
}
.v4-compare__col{
  padding:32px 26px;
  border:1px solid var(--v4-line);
  border-radius:12px;
  background:var(--v4-bg-2);
  text-align:left;
}
.v4-compare__col--is-this{border-color:var(--v4-gold);}
.v4-compare__head{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:16px;
}
.v4-compare__head svg{flex:0 0 auto;fill:var(--v4-gold-soft);}
.v4-compare__title{
  margin:0;
  font-family:var(--v4-serif);
  font-size:1.15rem;
  font-weight:400;
  color:var(--v4-cream);
}
.v4-compare__text{margin:0 0 16px;font-size:var(--v4-fs-sm);line-height:1.7;color:var(--v4-muted);}
.v4-compare__col .v4-list{margin-bottom:20px;}

/* ============================================================
   6. POPUP DE PROMOCIÓN — cupos limitados
   ============================================================
   Componente reusable: sin el HTML de #v4-promo en la página, esto no
   hace nada (mismo criterio que el resto de "Agregados" de este
   archivo). Overlay+card en un <div hidden>, igual patrón que el
   lightbox, pero con transición real de entrada/salida — el lightbox
   togglea [hidden] directamente, lo que anula su transición CSS. */

.v4-promo[hidden]{display:none;}
.v4-promo{
  position:fixed;inset:0;z-index:9990;
  display:flex;align-items:center;justify-content:center;
  padding:20px;
}
.v4-promo__overlay{
  position:absolute;inset:0;
  background:rgba(12,10,8,.72);
  opacity:0;transition:opacity .4s var(--v4-ease-lux);
}
.v4-promo__card{
  position:relative;
  width:100%;max-width:420px;
  padding:36px 30px 30px;
  background:var(--v4-bg-2);
  border:1px solid var(--v4-line);
  border-radius:var(--v4-r);
  box-shadow:0 30px 80px rgba(0,0,0,.55);
  text-align:left;
  opacity:0;transform:translateY(18px) scale(.97);
  transition:opacity .45s var(--v4-ease-lux),transform .45s var(--v4-ease-lux);
}
.v4-promo.is-open .v4-promo__overlay{opacity:1;}
.v4-promo.is-open .v4-promo__card{opacity:1;transform:none;}
.v4-promo__close{
  position:absolute;top:12px;right:12px;
  display:flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;
  background:transparent;border:0;
  font-size:1.6rem;line-height:1;color:var(--v4-muted);
  cursor:pointer;transition:color .3s ease;
}
.v4-promo__close:hover{color:var(--v4-gold-soft);}
.v4-promo__badge{
  display:inline-block;margin-bottom:16px;padding:6px 12px;
  border:1px solid var(--v4-gold);border-radius:var(--v4-r);
  font-family:var(--v4-sans);font-size:var(--v4-fs-micro);font-weight:600;
  letter-spacing:var(--v4-ls-micro);text-transform:uppercase;color:var(--v4-gold-soft);
}
.v4-promo__title{
  margin:0 0 8px;font-family:var(--v4-serif);font-weight:400;
  font-size:1.5rem;line-height:1.2;color:var(--v4-cream);
}
.v4-promo__price{margin:0 0 16px;font-family:var(--v4-serif);font-size:1.15rem;color:var(--v4-gold-soft);}
.v4-promo__text{margin:0 0 24px;font-size:var(--v4-fs-sm);line-height:1.6;color:var(--v4-muted);}
.v4-promo__cta{width:100%;}

@media (prefers-reduced-motion:reduce){
  .v4-promo__overlay,.v4-promo__card{transition:none;}
}

/* ============================================================
   7. OFERTA INDIVIDUAL EN PRECIOS — no es un paquete
   ============================================================
   Misma oferta que el popup #v4-promo (8 Upper Porcelain Veneers,
   $2,640 USD) pero con una identidad visual propia, a propósito
   distinta de las dos referencias que compiten con ella:
   - vs. .v4-price-card (paquetes de 20 veneers + viaje): layout
     horizontal de una sola fila en vez de grilla de 3, sin badge tipo
     "Most Popular"/"VIP Choice".
   - vs. el popup (#v4-promo, mismo copy/precio/CTA): acá la tarjeta es
     de dos tonos — bloque de info + panel de precio con fondo dorado
     tenue, separados por una línea — y esquinas redondeadas 12px como
     .v4-card, en vez del bloque de un solo color y esquinas casi rectas
     (--v4-r, 2px) del popup. Mismo criterio en mobile y desktop: el
     panel de precio SIEMPRE tiene su propio fondo (nunca queda como
     texto flotando centrado contra el bloque de info, que es lo que se
     veía mal en desktop con la versión anterior de una sola fila
     centrada por altura dispareja). */
.v4-single-offer{
  display:flex;flex-direction:column;
  border:1px solid var(--v4-line);border-radius:12px;overflow:hidden;
  background:var(--v4-bg-2);
}
@media (min-width:768px){
  .v4-single-offer{flex-direction:row;align-items:stretch;}
}
.v4-single-offer__info{padding:32px 28px;flex:1 1 auto;}
.v4-single-offer__badge{
  display:inline-block;margin-bottom:14px;padding:6px 14px;
  border:1px solid var(--v4-gold);border-radius:20px;
  font-family:var(--v4-sans);font-size:var(--v4-fs-micro);font-weight:600;
  letter-spacing:var(--v4-ls-micro);text-transform:uppercase;color:var(--v4-gold-soft);
}
.v4-single-offer__title{margin:0 0 10px;font-family:var(--v4-serif);font-weight:400;font-size:1.4rem;color:var(--v4-cream);}
.v4-single-offer__text{margin:0;font-size:var(--v4-fs-sm);line-height:1.6;color:var(--v4-muted);max-width:520px;}
.v4-single-offer__price{
  flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:16px;
  padding:28px;border-top:1px solid var(--v4-line);
  background:rgba(223,174,94,.07);
}
@media (min-width:768px){
  .v4-single-offer__price{
    align-items:center;text-align:center;min-width:240px;
    border-top:0;border-left:1px solid var(--v4-line);
  }
}
.v4-single-offer__amount{font-family:var(--v4-serif);font-size:2rem;line-height:1;color:var(--v4-gold);white-space:nowrap;}
.v4-single-offer__amount small{font-family:var(--v4-sans);font-size:.8rem;letter-spacing:1px;color:var(--v4-muted-2);}
.v4-single-offer__divider{margin:28px 0 32px;font-size:var(--v4-fs-sm);line-height:1.6;color:var(--v4-muted);text-align:center;}