/* Estilos compartidos de la maqueta de Microblading Ibiza (marca hermana de 5D Sacred Beauty).
   Misma tipografía que 5D (Playfair Display + Montserrat) y los mismos nombres de rol (t-*, glass-apple).
   TEMA OSCURO con dos variantes intercambiables (la clienta todavía no eligió):
     A) negro y dorado  -> html[data-tema="dorado"] (por defecto)
     B) negro y arena   -> html[data-tema="arena"]  (secciones que alternan entre negro y arena)
   TODO el color vive en este archivo como variables. En los HTML no hay ningún color escrito a mano: solo clases (bg-fondo, txt-tinta, bd-linea...).
   Cómo funciona: hay dos juegos de variables por tema, "--o-*" (superficie oscura) y "--c-*" (superficie clara).
   Cada sección elige su juego con una clase: .sec-oscura o .sec-clara (también .banda-negra, la cabecera y el pie son siempre oscuros).
   En el tema A, .sec-clara = .sec-oscura (todo oscuro). En el tema B, .sec-clara pasa a arena.
   Para quedarse con un solo tema: borrar el bloque del otro tema, el selector (marcado "SELECTOR DE TEMA (demo)") y dejar html con los valores elegidos.
   Contraste: texto de cuerpo >= 4.5:1 en ambos temas (ver el script de contraste del entregable). El bronce (--acento del tema B sobre arena) es solo decorativo (líneas, íconos); el texto sobre arena usa --acento-texto.
   Editar acá, no en cada página. */

/* ===== TEMA A: negro y dorado (por defecto) ===== */
html, html[data-tema="dorado"] {
 --o-fondo: #0D0C0B;
 --o-banda: #16140F;
 --o-sup: #16140F;
 --o-sup2: #1D1A14;
 --o-tinta: #F4EFE6;
 --o-cuerpo: #D9D2C5;
 --o-suave: #B6AD9C;
 --o-linea: rgba(201, 164, 106, 0.22);
 --o-linea-fuerte: rgba(201, 164, 106, 0.6);
 --o-acento: #C9A46A;
 --o-acento-claro: #E2C691;
 --o-acento-texto: #C9A46A;
 --o-acento-sobre: #0D0C0B;
 --o-btn-bg: linear-gradient(135deg, #B8904F 0%, #E2C691 50%, #B8904F 100%);
 --o-btn-hover: linear-gradient(135deg, #C9A46A 0%, #EFD9AC 50%, #C9A46A 100%);
 --o-btn-texto: #0D0C0B;
 --o-btn-borde: #C9A46A;
 --o-btn-c-borde: #C9A46A;
 --o-btn-c-texto: #E2C691;
 --o-btn-c-hover: rgba(201, 164, 106, 0.16);
 --o-btn-c-hover-texto: #E2C691;
 --o-foco: #E2C691;
 --o-campo: #0D0C0B;
 --o-wa-bg: linear-gradient(135deg, #B8904F 0%, #E2C691 50%, #B8904F 100%);
 --o-wa-texto: #0D0C0B;
 --o-cab: rgba(13, 12, 11, 0.92);
 --o-sombra: rgba(0, 0, 0, 0.55);
 --o-scrim: rgba(13, 12, 11, 0.78);
 --o-trazo: #C9A46A;
 /* en el tema A la superficie "clara" es igual de oscura */
 --c-fondo: var(--o-fondo); --c-banda: var(--o-banda); --c-sup: var(--o-sup); --c-sup2: var(--o-sup2); --c-tinta: var(--o-tinta); --c-cuerpo: var(--o-cuerpo); --c-suave: var(--o-suave); --c-linea: var(--o-linea); --c-linea-fuerte: var(--o-linea-fuerte); --c-acento: var(--o-acento); --c-acento-claro: var(--o-acento-claro); --c-acento-texto: var(--o-acento-texto); --c-acento-sobre: var(--o-acento-sobre); --c-btn-bg: var(--o-btn-bg); --c-btn-hover: var(--o-btn-hover); --c-btn-texto: var(--o-btn-texto); --c-btn-borde: var(--o-btn-borde); --c-btn-c-borde: var(--o-btn-c-borde); --c-btn-c-texto: var(--o-btn-c-texto); --c-btn-c-hover: var(--o-btn-c-hover); --c-btn-c-hover-texto: var(--o-btn-c-hover-texto); --c-foco: var(--o-foco); --c-campo: var(--o-campo); --c-wa-bg: var(--o-wa-bg); --c-wa-texto: var(--o-wa-texto); --c-cab: var(--o-cab); --c-sombra: var(--o-sombra); --c-scrim: var(--o-scrim); --c-trazo: var(--o-trazo);
 --foto-claro: #F4EFE6; --foto-oscuro: #0D0C0B;
 --foto-filtro: grayscale(1);
 --muestra-dorado: linear-gradient(135deg, #B8904F, #E2C691); --muestra-arena: linear-gradient(90deg, #0D0C0B 50%, #E9DFCF 50%);
 color-scheme: dark;
}
/* ===== TEMA B: negro y arena ===== */
html[data-tema="arena"] {
 --o-fondo: #0D0C0B;
 --o-banda: #16140F;
 --o-sup: #16140F;
 --o-sup2: #1D1A14;
 --o-tinta: #F4EFE6;
 --o-cuerpo: #D9D2C5;
 --o-suave: #B6AD9C;
 --o-linea: rgba(217, 199, 167, 0.22);
 --o-linea-fuerte: rgba(217, 199, 167, 0.6);
 --o-acento: #D9C7A7;
 --o-acento-claro: #EDE0C8;
 --o-acento-texto: #D9C7A7;
 --o-acento-sobre: #0D0C0B;
 --o-btn-bg: #E9DFCF;
 --o-btn-hover: #F7F1E6;
 --o-btn-texto: #14110C;
 --o-btn-borde: #E9DFCF;
 --o-btn-c-borde: #F4EFE6;
 --o-btn-c-texto: #F4EFE6;
 --o-btn-c-hover: #F4EFE6;
 --o-btn-c-hover-texto: #0D0C0B;
 --o-foco: #EDE0C8;
 --o-campo: #0D0C0B;
 --o-wa-bg: #D9C7A7;
 --o-wa-texto: #0D0C0B;
 --o-cab: rgba(13, 12, 11, 0.92);
 --o-sombra: rgba(0, 0, 0, 0.55);
 --o-scrim: rgba(13, 12, 11, 0.78);
 --o-trazo: #D9C7A7;
 --c-fondo: #E9DFCF;
 --c-banda: #E3D8C4;
 --c-sup: #F3ECE0;
 --c-sup2: #F3ECE0;
 --c-tinta: #14110C;
 --c-cuerpo: #3A332A;
 --c-suave: #5A5144;
 --c-linea: rgba(20, 17, 12, 0.16);
 --c-linea-fuerte: rgba(20, 17, 12, 0.5);
 --c-acento: #B08A55;
 --c-acento-claro: #C9A46A;
 --c-acento-texto: #6B4D1C;
 --c-acento-sobre: #14110C;
 --c-btn-bg: #14110C;
 --c-btn-hover: #2E2820;
 --c-btn-texto: #E9DFCF;
 --c-btn-borde: #14110C;
 --c-btn-c-borde: #14110C;
 --c-btn-c-texto: #14110C;
 --c-btn-c-hover: #14110C;
 --c-btn-c-hover-texto: #E9DFCF;
 --c-foco: #14110C;
 --c-campo: #FBF7EF;
 --c-wa-bg: #D9C7A7;
 --c-wa-texto: #0D0C0B;
 --c-cab: rgba(233, 223, 207, 0.92);
 --c-sombra: rgba(20, 17, 12, 0.25);
 --c-scrim: rgba(13, 12, 11, 0.78);
 --c-trazo: #14110C;
 --foto-claro: #F4EFE6; --foto-oscuro: #0D0C0B;
 --foto-filtro: grayscale(1) sepia(0.18);
 --muestra-dorado: linear-gradient(135deg, #B8904F, #E2C691); --muestra-arena: linear-gradient(90deg, #0D0C0B 50%, #E9DFCF 50%);
}

/* ===== Qué juego usa cada zona ===== */
:root, .sec-oscura, .banda-negra, header, footer, #mobileMenu, .oscuro { --fondo: var(--o-fondo); --banda: var(--o-banda); --sup: var(--o-sup); --sup2: var(--o-sup2); --tinta: var(--o-tinta); --cuerpo: var(--o-cuerpo); --suave: var(--o-suave); --linea: var(--o-linea); --linea-fuerte: var(--o-linea-fuerte); --acento: var(--o-acento); --acento-claro: var(--o-acento-claro); --acento-texto: var(--o-acento-texto); --acento-sobre: var(--o-acento-sobre); --btn-bg: var(--o-btn-bg); --btn-hover: var(--o-btn-hover); --btn-texto: var(--o-btn-texto); --btn-borde: var(--o-btn-borde); --btn-c-borde: var(--o-btn-c-borde); --btn-c-texto: var(--o-btn-c-texto); --btn-c-hover: var(--o-btn-c-hover); --btn-c-hover-texto: var(--o-btn-c-hover-texto); --foco: var(--o-foco); --campo: var(--o-campo); --wa-bg: var(--o-wa-bg); --wa-texto: var(--o-wa-texto); --cab: var(--o-cab); --sombra: var(--o-sombra); --scrim: var(--o-scrim); --trazo: var(--o-trazo); }
.sec-clara { --fondo: var(--c-fondo); --banda: var(--c-banda); --sup: var(--c-sup); --sup2: var(--c-sup2); --tinta: var(--c-tinta); --cuerpo: var(--c-cuerpo); --suave: var(--c-suave); --linea: var(--c-linea); --linea-fuerte: var(--c-linea-fuerte); --acento: var(--c-acento); --acento-claro: var(--c-acento-claro); --acento-texto: var(--c-acento-texto); --acento-sobre: var(--c-acento-sobre); --btn-bg: var(--c-btn-bg); --btn-hover: var(--c-btn-hover); --btn-texto: var(--c-btn-texto); --btn-borde: var(--c-btn-borde); --btn-c-borde: var(--c-btn-c-borde); --btn-c-texto: var(--c-btn-c-texto); --btn-c-hover: var(--c-btn-c-hover); --btn-c-hover-texto: var(--c-btn-c-hover-texto); --foco: var(--c-foco); --campo: var(--c-campo); --wa-bg: var(--c-wa-bg); --wa-texto: var(--c-wa-texto); --cab: var(--c-cab); --sombra: var(--c-sombra); --scrim: var(--c-scrim); --trazo: var(--c-trazo); }

html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
body {
 font-family: 'Montserrat', sans-serif !important;
 background-color: var(--fondo);
 color: var(--tinta);
}
::selection { background: var(--acento); color: var(--acento-sobre); }
.font-serif { font-family: 'Playfair Display', serif !important; }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; }

/* Secciones: el color de fondo sale del juego de variables de la zona */
.sec-oscura, .sec-clara { background-color: var(--fondo); color: var(--tinta); }
.fondo-sup { background-color: var(--banda); }
.banda-negra { background-color: var(--banda); color: var(--tinta); border: 1px solid var(--linea); }
.portada { background-color: var(--fondo); }

/* Utilidades de color propias (en vez de colores escritos en las clases de Tailwind) */
.bg-fondo { background-color: var(--fondo); }
.bg-cab { background-color: var(--cab); }
.txt-tinta { color: var(--tinta); }
.txt-cuerpo { color: var(--cuerpo); }
.txt-suave { color: var(--suave); }
.txt-acento { color: var(--acento-texto); }
.bd-linea { border-color: var(--linea); }
.bd-fuerte { border-color: var(--linea-fuerte); }
.dv-linea > :not([hidden]) ~ :not([hidden]) { border-color: var(--linea); }
.acc-acento { accent-color: var(--acento); }
.hover-tinta:hover { color: var(--tinta); }
/* Palabra clave de los titulares: cursiva con color de acento (como en la web actual de Caro) */
em.acento { font-style: italic; color: var(--acento-texto); }
header { border-bottom: 1px solid var(--linea); }
footer { background-color: var(--fondo); color: var(--tinta); border-top: 1px solid var(--linea); }
[icon="lucide:check"] { color: var(--acento-texto); }

/* Motivo gráfico: trazos de pelo muy finos (decorativo). Es una máscara pintada con --trazo, así cambia con el tema */
.motivo-trazos {
 background-color: var(--trazo);
 -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='90' viewBox='0 0 180 90' fill='none' stroke='black' stroke-width='1' stroke-linecap='round' opacity='.1'%3E%3Cpath d='M8 70 C 22 52 38 38 58 30'/%3E%3Cpath d='M24 78 C 40 58 58 44 80 36'/%3E%3Cpath d='M50 74 C 66 56 84 44 106 38'/%3E%3Cpath d='M92 70 C 108 52 126 40 150 34'/%3E%3Cpath d='M118 78 C 134 62 152 50 172 44'/%3E%3Cpath d='M70 20 C 84 10 100 6 120 6'/%3E%3C/svg%3E");
 mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='90' viewBox='0 0 180 90' fill='none' stroke='black' stroke-width='1' stroke-linecap='round' opacity='.1'%3E%3Cpath d='M8 70 C 22 52 38 38 58 30'/%3E%3Cpath d='M24 78 C 40 58 58 44 80 36'/%3E%3Cpath d='M50 74 C 66 56 84 44 106 38'/%3E%3Cpath d='M92 70 C 108 52 126 40 150 34'/%3E%3Cpath d='M118 78 C 134 62 152 50 172 44'/%3E%3Cpath d='M70 20 C 84 10 100 6 120 6'/%3E%3C/svg%3E");
 -webkit-mask-size: 180px 90px; mask-size: 180px 90px;
}
.motivo-trazos-fade {
 -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='90' viewBox='0 0 180 90' fill='none' stroke='black' stroke-width='1' stroke-linecap='round' opacity='.1'%3E%3Cpath d='M8 70 C 22 52 38 38 58 30'/%3E%3Cpath d='M24 78 C 40 58 58 44 80 36'/%3E%3Cpath d='M50 74 C 66 56 84 44 106 38'/%3E%3Cpath d='M92 70 C 108 52 126 40 150 34'/%3E%3Cpath d='M118 78 C 134 62 152 50 172 44'/%3E%3Cpath d='M70 20 C 84 10 100 6 120 6'/%3E%3C/svg%3E"), linear-gradient(to bottom, black 55%, transparent);
 mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='90' viewBox='0 0 180 90' fill='none' stroke='black' stroke-width='1' stroke-linecap='round' opacity='.1'%3E%3Cpath d='M8 70 C 22 52 38 38 58 30'/%3E%3Cpath d='M24 78 C 40 58 58 44 80 36'/%3E%3Cpath d='M50 74 C 66 56 84 44 106 38'/%3E%3Cpath d='M92 70 C 108 52 126 40 150 34'/%3E%3Cpath d='M118 78 C 134 62 152 50 172 44'/%3E%3Cpath d='M70 20 C 84 10 100 6 120 6'/%3E%3C/svg%3E"), linear-gradient(to bottom, black 55%, transparent);
 -webkit-mask-size: 180px 90px, 100% 100%; mask-size: 180px 90px, 100% 100%;
 -webkit-mask-composite: source-in; mask-composite: intersect;
}

/* Fotos en escala de grises con CSS (los archivos originales no se tocan). En el tema B llevan un leve tono cálido. Los antes y después NO llevan este filtro. */
.foto-bn { filter: var(--foto-filtro); }

/* Escala tipográfica por componente (mismos roles que la maqueta de 5D) */
body .t-display { font-family: 'Playfair Display', serif !important; font-size: 38px !important; font-weight: 400 !important; font-style: normal !important; line-height: 1 !important; letter-spacing: -0.025em !important; text-transform: none !important; color: var(--tinta) !important; overflow-wrap: break-word; }
body .t-h2 { font-family: 'Playfair Display', serif !important; font-size: 32px !important; font-weight: 500 !important; font-style: normal !important; line-height: 1.08 !important; letter-spacing: -0.025em !important; text-transform: none !important; color: var(--tinta) !important; }
body .t-h3 { font-family: 'Playfair Display', serif !important; font-size: 22px !important; font-weight: 400 !important; font-style: normal !important; line-height: 1.15 !important; letter-spacing: -0.02em !important; text-transform: none !important; color: var(--tinta) !important; }
body .t-panel-title { font-family: 'Playfair Display', serif !important; font-size: 20px !important; font-weight: 500 !important; font-style: normal !important; line-height: 1.2 !important; letter-spacing: normal !important; text-transform: none !important; color: var(--tinta) !important; }
body .t-eyebrow { font-family: 'Montserrat', sans-serif !important; font-size: 12px !important; font-weight: 600 !important; font-style: normal !important; line-height: 1.3 !important; letter-spacing: 0.22em !important; text-transform: uppercase !important; color: var(--acento-texto) !important; }
body .t-lead { font-family: 'Montserrat', sans-serif !important; font-size: 16px !important; font-weight: 400 !important; font-style: normal !important; line-height: 1.65 !important; letter-spacing: normal !important; text-transform: none !important; color: var(--cuerpo) !important; }
body .t-body { font-family: 'Montserrat', sans-serif !important; font-size: 15px !important; font-weight: 400 !important; font-style: normal !important; line-height: 1.65 !important; letter-spacing: normal !important; text-transform: none !important; color: var(--cuerpo) !important; }
body .t-card-body { font-family: 'Montserrat', sans-serif !important; font-size: 14px !important; font-weight: 400 !important; font-style: normal !important; line-height: 1.55 !important; letter-spacing: normal !important; text-transform: none !important; color: var(--cuerpo) !important; }
body .t-card-long { font-family: 'Montserrat', sans-serif !important; font-size: 14px !important; font-weight: 400 !important; font-style: normal !important; line-height: 1.65 !important; letter-spacing: normal !important; text-transform: none !important; color: var(--cuerpo) !important; }
body .t-list { font-family: 'Montserrat', sans-serif !important; font-size: 14px !important; font-weight: 500 !important; font-style: normal !important; line-height: 1.4 !important; letter-spacing: normal !important; text-transform: none !important; color: var(--tinta) !important; }
body .t-list.t-strong { font-weight: 600 !important; }
body .t-meta { font-family: 'Montserrat', sans-serif !important; font-size: 12px !important; font-weight: 500 !important; font-style: normal !important; line-height: 1.45 !important; letter-spacing: normal !important; text-transform: none !important; color: var(--suave) !important; }
body .t-label { font-family: 'Montserrat', sans-serif !important; font-size: 12px !important; font-weight: 600 !important; font-style: normal !important; line-height: 1.3 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: var(--suave) !important; }
body .t-chip { font-family: 'Montserrat', sans-serif !important; font-size: 12px !important; font-weight: 600 !important; font-style: normal !important; line-height: 1 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: var(--tinta) !important; }
body .t-btn { font-family: 'Montserrat', sans-serif !important; font-size: 12px !important; font-weight: 600 !important; font-style: normal !important; line-height: 1 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; }
@media (min-width: 768px) {
 body .t-display { font-size: 60px !important; }
 body .t-h2 { font-size: 42px !important; }
 body .t-h3 { font-size: 24px !important; }
 body .t-lead { font-size: 18px !important; }
 body .t-body { font-size: 16px !important; }
}
@media (min-width: 1024px) {
 body .t-display { font-size: clamp(47px, 4.6vw, 72px) !important; }
 body .t-h2 { font-size: 48px !important; }
}

/* Botones. Los nombres vienen de la versión en blanco y negro y se mantienen para no tocar el contenido:
   .btn-negro y .btn-blanco = botón PRIMARIO (en el tema A, degradado dorado; en B, negro sobre arena y arena sobre negro);
   .btn-contorno y .btn-contorno-claro = botón de CONTORNO. Pastillas de 44 px como mínimo. */
.btn-negro, .btn-contorno, .btn-blanco, .btn-contorno-claro { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; gap: 0.5rem; border-radius: 999px; padding: 0.85rem 1.75rem; transition: background-color .2s ease, color .2s ease, border-color .2s ease, filter .2s ease; text-align: center; }
.btn-negro, .btn-contorno, .btn-blanco, .btn-contorno-claro { line-height: 1.3 !important; }
/* Botones de una sola línea (en móvil el relleno lateral baja un poco para que entre el texto) */
.btn-negro, .btn-contorno, .btn-blanco, .btn-contorno-claro { white-space: nowrap; }
@media (max-width: 479px) { .btn-negro, .btn-contorno, .btn-blanco, .btn-contorno-claro { padding-left: 1rem; padding-right: 1rem; } }
/* Red de seguridad: comun.js añade .btn-envolver solo a un botón cuyo texto NO cabe en una línea en el ancho disponible (evita el scroll horizontal; hay que acortar ese texto) */
.btn-negro.btn-envolver, .btn-contorno.btn-envolver, .btn-blanco.btn-envolver, .btn-contorno-claro.btn-envolver { white-space: normal; max-width: 100%; }
.btn-negro, .btn-blanco { background: var(--btn-bg); color: var(--btn-texto); border: 1px solid var(--btn-borde); }
.btn-negro:hover, .btn-blanco:hover { background: var(--btn-hover); color: var(--btn-texto); }
.btn-contorno, .btn-contorno-claro { background: transparent; color: var(--btn-c-texto); border: 1px solid var(--btn-c-borde); }
.btn-contorno:hover, .btn-contorno-claro:hover { background: var(--btn-c-hover); color: var(--btn-c-hover-texto); }
.enlace-sub { display: inline-flex; min-height: 44px; align-items: center; gap: 0.4rem; color: var(--tinta); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.enlace-sub:hover { text-decoration-thickness: 2px; color: var(--acento-texto); }

/* Tarjeta: superficie con línea fina (en 5D es el vidrio). Dentro de una banda (.fondo-sup) usa la segunda superficie para despegarse. */
.glass-apple { background-color: var(--sup) !important; border: 1px solid var(--linea) !important; box-shadow: 0 1px 2px var(--sombra) !important; }
.fondo-sup .glass-apple { background-color: var(--sup2) !important; }
.glass-apple-hover { transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease !important; }
.glass-apple-hover:hover { border-color: var(--acento) !important; box-shadow: 0 18px 40px -22px var(--sombra) !important; }

/* Menú */
#menuBtn[aria-expanded="true"] .menu-bar:first-child { transform: translateY(5.5px) rotate(45deg); }
#menuBtn[aria-expanded="true"] .menu-bar:last-child { transform: translateY(-5.5px) rotate(-45deg); }

/* Pestañas de filtro del catálogo */
.svc-tabs { scrollbar-width: none; }
.svc-tabs::-webkit-scrollbar { display: none; }
body .svc-tab { background: var(--sup); border: 1px solid var(--linea); transition: background-color .2s ease, color .2s ease, border-color .2s ease; cursor: pointer; }
body .svc-tab:hover { border-color: var(--acento); }
body .svc-tab[aria-pressed="true"] { background: var(--btn-bg); border-color: var(--btn-borde); color: var(--btn-texto) !important; }
.svc-count { opacity: .7; }
.svc-card[hidden] { display: none !important; }
.svc-sum { list-style: none; }
.svc-sum::-webkit-details-marker { display: none; }
.svc-det[open] .svc-chev { transform: rotate(180deg); }

/* Reseñas: columnas tipo mampostería */
.resenas-cols { column-gap: 1.25rem; }
.resenas-cols > * { break-inside: avoid; margin-bottom: 1.25rem; }
@media (min-width: 768px) { .resenas-cols { columns: 2; } }
@media (min-width: 1024px) { .resenas-cols { columns: 3; } }

/* Pasos del proceso */
.paso-num { font-family: 'Playfair Display', serif; font-size: 34px; line-height: 1; color: var(--acento-texto); }

/* Deslizador antes / después (en color). Funciona con un <input type=range> encima: teclado, mouse y touch. */
.comparison-slider { position: relative; width: 100%; overflow: hidden; user-select: none; -webkit-user-select: none; --pos: 50%; aspect-ratio: 4 / 3; background: var(--foto-oscuro); }
.comparison-slider img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; }
.comparison-slider .cmp-after { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos)); }
.comparison-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--foto-claro); pointer-events: none; z-index: 20; }
.comparison-circle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; background: var(--foto-claro); border: 1px solid var(--foto-oscuro); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 15px var(--sombra); color: var(--foto-oscuro); }
.comparison-slider .cmp-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 30; touch-action: pan-y; }
.comparison-slider .cmp-tag { position: absolute; top: 14px; z-index: 25; background: var(--foto-claro); color: var(--foto-oscuro) !important; border-radius: 999px; padding: 6px 12px; pointer-events: none; }
.comparison-slider .cmp-tag.antes { left: 14px; }
.comparison-slider .cmp-tag.despues { right: 14px; }
.comparison-slider:focus-within .comparison-circle { outline: 2px solid var(--foco); outline-offset: 3px; }

/* Botón flotante de WhatsApp: fondo de acento (degradado dorado en el tema A), ícono en el color "sobre acento"; nunca verde */
.wa-flotante { position: fixed; right: 20px; bottom: 20px; z-index: 50; width: 56px; height: 56px; border-radius: 50%; background: var(--wa-bg); color: var(--wa-texto); display: flex; align-items: center; justify-content: center; border: 2px solid var(--fondo); box-shadow: 0 6px 20px var(--sombra); transition: transform .2s ease; }
.wa-flotante:hover { transform: scale(1.06); }

/* Formularios (el e-book y lo que venga). El error se marca con borde grueso y texto en negrita, no solo con color. */
.campo { display: block; width: 100%; min-height: 44px; border: 1px solid var(--linea-fuerte); border-radius: 12px; background: var(--campo); padding: 0.7rem 1rem; font-size: 14px; color: var(--tinta); }
.campo::placeholder { color: var(--suave); opacity: 1; }
.campo:focus { outline: 2px solid var(--foco); outline-offset: 2px; border-color: var(--acento); }
.campo[aria-invalid="true"] { border-color: var(--tinta); border-width: 2px; }
.campo-error { display: flex; align-items: flex-start; gap: 0.4em; font-size: 12px; font-weight: 600; color: var(--tinta); margin-top: 4px; }
.campo-error iconify-icon { flex-shrink: 0; font-size: 14px; margin-top: 0.1em; }
/* Casilla: toda la línea es zona táctil (la etiqueta mide 44 px como mínimo) */
label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) { min-height: 44px; padding-block: 0.5rem; cursor: pointer; }
label:has(> input[type="checkbox"]) > input, label:has(> input[type="radio"]) > input { margin-top: 0 !important; }
/* Enlaces dentro de texto corrido (política de privacidad...): el relleno vertical agranda la zona táctil sin mover la línea */
label a, .t-card-body a { padding-block: 0.8rem; }
.campo-error[hidden], .form-ok[hidden] { display: none !important; }

/* SELECTOR DE TEMA (demo): borrar al elegir. Botón flotante abajo a la izquierda.
   En pantallas < 640 px se reduce a un solo botón de 44 px con las dos muestras (alterna entre temas), sin la palabra "Tema";
   queda a la izquierda (WhatsApp va a la derecha) y se oculta mientras hay un campo de texto enfocado. */
.selector-tema { position: fixed; left: 12px; bottom: 12px; z-index: 55; display: inline-flex; align-items: center; gap: 2px; padding: 2px 4px 2px 12px; border-radius: 999px; background: var(--cab); border: 1px solid var(--linea); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-family: 'Montserrat', sans-serif; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--suave); opacity: .92; }
.selector-tema:hover, .selector-tema:focus-within { opacity: 1; }
.selector-tema button { display: inline-flex; min-height: 44px; align-items: center; gap: 6px; padding: 0 10px; border: 0; border-radius: 999px; background: transparent; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.selector-tema button[aria-pressed="true"] { color: var(--tinta); font-weight: 600; }
.selector-tema .muestra { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--linea-fuerte); }
.selector-tema button[aria-pressed="true"] .muestra { box-shadow: 0 0 0 2px var(--fondo), 0 0 0 3px var(--tinta); }
.selector-tema .muestra-dorado { background: var(--muestra-dorado); }
.selector-tema .muestra-arena { background: var(--muestra-arena); }
.selector-tema .selector-tema-mini { display: none; }
@media (max-width: 639px) {
 .selector-tema { left: 8px; bottom: 8px; padding: 0; }
 .selector-tema .selector-tema-t, .selector-tema .selector-tema-op { display: none; }
 .selector-tema .selector-tema-mini { display: inline-flex; min-width: 44px; justify-content: center; gap: 4px; padding: 0 12px; }
 html[data-tema="dorado"] .selector-tema-mini .muestra-dorado, html[data-tema="arena"] .selector-tema-mini .muestra-arena { box-shadow: 0 0 0 2px var(--fondo), 0 0 0 3px var(--tinta); }
 .selector-tema.selector-tema-oculto { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* ===== Cabecera de escritorio (>= 1024 px): enlaces en línea entre el logo y el botón. La altura de la cabecera no cambia (efectos.js la compacta con --fx-cab-recorte). ===== */
.cab-izq { display: none; }
.cab-nav { display: none; }
.cab-burger { display: flex; }
@media (min-width: 768px) { .cab-izq { display: flex; } }
@media (min-width: 1024px) {
 .cab-izq { display: none; }
 .cab-nav { display: flex; flex: 1 1 auto; min-width: 0; align-items: center; justify-content: center; gap: 0.25rem; }
 .cab-burger { display: none; }
}
@media (min-width: 1400px) { .cab-izq { display: flex; } }
.cab-enlace { display: inline-flex; min-height: 44px; align-items: center; padding-inline: 0.4rem; font-size: 12px; font-weight: 500; letter-spacing: 0.02em; white-space: nowrap; color: var(--tinta); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 8px; text-decoration-thickness: 1px; transition: text-decoration-color .2s ease, color .2s ease; }
.cab-enlace:hover { text-decoration-color: currentColor; }
@media (min-width: 1024px) and (max-width: 1099px) { .cab-enlace { padding-inline: 0.3rem; letter-spacing: 0; } }
@media (min-width: 1200px) { .cab-enlace { padding-inline: 0.55rem; letter-spacing: 0.03em; } }
.cab-enlace[aria-current="page"] { font-weight: 600; text-decoration-color: currentColor; }

/* Saltar al contenido: fuera de pantalla hasta recibir foco */
.saltar { position: fixed; left: 12px; top: 0; z-index: 100; transform: translateY(-200%); display: inline-flex; min-height: 44px; align-items: center; padding: 0 1.25rem; border-radius: 999px; background: var(--btn-bg); color: var(--btn-texto); border: 1px solid var(--btn-borde); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; }
.saltar:focus, .saltar:focus-visible { transform: translateY(12px); }
main:focus { outline: none; }

/* Datos de contacto (teléfono, Instagram...) en listas de definición: enlace de 44 px de alto */
dd > a { display: inline-flex; min-height: 44px; align-items: center; }

/* Pie: enlaces de texto con zona táctil de 44 px */
.pie-enlace { display: inline-flex; min-height: 44px; align-items: center; }

/* Barra de filtros del catálogo: pegada bajo la cabecera solo en escritorio */
@media (max-width: 767px) { .svc-tabbar { position: static !important; } }

@media (prefers-reduced-motion: reduce) {
 html { scroll-behavior: auto; }
 * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ---------- Familia de servicios: una foto + lista de precios (sin tarjetas con la misma foto repetida) ---------- */
.familia { display: grid; gap: 1.5rem; }
@media (min-width: 1024px) { .familia { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3rem; align-items: start; } }
.familia-foto { position: relative; overflow: hidden; border-radius: 20px; aspect-ratio: 4 / 5; background: var(--sup); }
@media (max-width: 1023px) { .familia-foto { aspect-ratio: 16 / 10; } }
.familia-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lista-precios { display: flex; flex-direction: column; }
.fila-serv { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .35rem 1.25rem; padding: 1.15rem 0; border-top: 1px solid var(--linea); align-items: start; }
.fila-serv:last-child { border-bottom: 1px solid var(--linea); }
.fila-serv .fs-nombre { grid-column: 1; }
.fila-serv .fs-precio { grid-column: 2; grid-row: 1; text-align: right; white-space: nowrap; font-family: 'Playfair Display', serif; font-size: 1.25rem; line-height: 1.2; color: var(--acento-texto); }
.fila-serv .fs-meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
.fila-serv .fs-desc { grid-column: 1 / -1; }
.fila-serv .fs-acc { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.25rem; margin-top: .35rem; }
.fila-serv[hidden] { display: none; }