/* «¿Cómo sería tu web?» (bloque xp/boceto, assets/js/boceto.js; datos en inc/boceto.php). Se carga donde está el bloque.
- Fuera del marco, la marca de la web (aviso «a medida», panel, lista del porqué, «Te lo mando por correo»).
- Dentro del marco (.xp-bc__web), la web del boceto: sus colores (--bc1 oscuro, --bc2 acento, --bc3 fondo suave, --bctb
texto de los botones) y cuatro estilos muy distintos con la misma estructura (data-estilo):
· cercano: formas suaves y redondeadas, foto con forma orgánica, opiniones como conversación;
· minimal: editorial minimalista, blanco, letra limpia, apartados numerados y el menú siempre a la vista (también
en el móvil, en una fila);
· elegante: marfil, serifa clásica legible, fotos en arco con un filete desplazado, cursivas y una sola cita grande;
· atrevido: fondo negro, titulares enormes en mayúsculas, cinta en movimiento, bloques con borde grueso y sombra dura.
data-tipo (personal o empresa) cambia lo poco que no cambia el JS. Se adapta al ancho del marco con consultas de
contenedor: el mismo boceto se ve como ordenador o como móvil.
- Los números y bocadillos del porqué van siempre en rosa de la marca: son la capa de anotaciones, no parte de la web. */
/* ---------- Distribución ---------- */
.xp-bc { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.xp-bc__arriba { display: grid; gap: 1.5rem; }
/* Al bajar por las opciones, el boceto se queda fijo a la vista (solo dentro de .xp-bc__arriba: no pisa lo de abajo) */
@media (min-width: 1000px) {
.xp-bc__arriba { grid-template-columns: 280px minmax(0, 1fr); align-items: start; gap: 2rem; }
.xp-bc__vista { position: sticky; top: 5.5rem; }
.xp-bc__pantalla { height: clamp(440px, calc(100vh - 13rem), 760px); }
.xp-bc__ir { display: none !important; }
}
@media (min-width: 1280px) { .xp-bc__arriba { grid-template-columns: 340px minmax(0, 1fr); gap: 2.5rem; } }
/* «No es una plantilla»: se dice antes que nada */
.xp-bc__medida {
position: relative; margin: 0; padding: 1rem 1.4rem 1rem 3.4rem; border-radius: var(--xp-radio);
background: var(--xp-blanco); box-shadow: var(--xp-sombra); font-size: 1rem; line-height: 1.55; color: var(--xp-texto);
}
.xp-bc[id] .xp-bc__medida { text-wrap: pretty; } /* el tema equilibra los párrafos de main y aquí dejaría las líneas cortas */
.xp-bc__medida::before { content: ""; position: absolute; left: 1.1rem; top: 1.05rem; width: 1.5rem; height: 1.5rem; background: var(--xp-ast) center / contain no-repeat; }
.xp-bc__medida strong { color: var(--xp-ciruela); }
/* ---------- Panel: lo que elige ---------- */
.xp-bc__panel { display: grid; gap: 1.5rem; padding: clamp(1.1rem, .9rem + .8vw, 1.6rem); border-radius: var(--xp-radio); background: var(--xp-blanco); box-shadow: var(--xp-sombra); }
.xp-bc__grupo { min-width: 0; margin: 0; padding: 0; border: 0; }
.xp-bc__grupo legend { margin-bottom: .75rem; padding: 0; font-family: var(--xp-f-texto); font-size: 1.0625rem; font-weight: 600; line-height: 1.4; color: var(--xp-ciruela); }
.xp-bc__grupo legend span[aria-hidden="true"] { display: inline-grid; place-items: center; flex: none; width: 1.6rem; height: 1.6rem; margin-right: .4rem; border-radius: 50%; background: var(--xp-ciruela); vertical-align: .05em; font: 700 .8125rem/1 var(--xp-f-ui); color: var(--xp-blanco); }
.xp-bc__grupo legend em { font-style: normal; font-weight: 400; font-size: .875rem; color: var(--xp-gris); }
/* Plegado en el móvil (boceto.js): la leyenda pasa a ser un botón */
.xp-bc__abrir { display: flex; align-items: center; gap: .15rem; width: 100%; min-height: 44px; margin: -.4rem 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.xp-bc__abrir::after { content: ""; width: .55rem; height: .55rem; margin-left: auto; border-right: 2px solid var(--xp-ciruela); border-bottom: 2px solid var(--xp-ciruela); transform: rotate(45deg) translateY(-2px); transition: transform .2s ease; }
.xp-bc__abrir[aria-expanded="true"]::after { transform: rotate(-135deg); }
.xp-bc__abrir:focus-visible { outline: 3px solid var(--xp-rosa-boton); outline-offset: 4px; border-radius: 8px; }
.xp-bc__grupo.is-plegado > :not(legend) { display: none; }
.xp-bc__grupo.is-plegado legend { margin-bottom: 0; }
.xp-bc__fichas { display: flex; flex-wrap: wrap; gap: .45rem; }
.xp-bc__ficha, .xp-bc__estilo, .xp-bc__tipo { position: relative; cursor: pointer; }
.xp-bc__ficha input, .xp-bc__color input, .xp-bc__estilo input, .xp-bc__tipo input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.xp-bc__ficha span { display: inline-flex; align-items: center; gap: .4rem; min-height: 38px; padding: .4rem .85rem; border: 1.5px solid var(--xp-linea); border-radius: 999px; background: var(--xp-blanco); font: 500 .875rem/1.25 var(--xp-f-ui); color: var(--xp-texto); transition: border-color .15s ease, background-color .15s ease, color .15s ease; }
.xp-bc__ficha:hover span { border-color: #CDBFD4; }
.xp-bc__ficha input:checked + span { border-color: var(--xp-ciruela); background: var(--xp-ciruela); color: var(--xp-blanco); }
/* Varias a la vez (objetivos, tienda y academia): con su casilla */
.xp-bc__fichas--varias .xp-bc__ficha span::before { content: ""; flex: none; width: .95rem; height: .95rem; border: 1.5px solid #CDBFD4; border-radius: 4px; background: var(--xp-blanco) center / 75% no-repeat; }
.xp-bc__fichas--varias .xp-bc__ficha input:checked + span::before { border-color: var(--xp-blanco); background-image: url("data:image/svg+xml;utf8,"); }
.xp-bc__ficha input:focus-visible + span, .xp-bc__color input:focus-visible + span { outline: 3px solid var(--xp-rosa-boton); outline-offset: 2px; }
/* Marca personal o web corporativa */
.xp-bc__tipos { display: grid; gap: .45rem; }
.xp-bc__tipo { display: flex; align-items: center; gap: .75rem; padding: .6rem .7rem; border: 1.5px solid var(--xp-linea); border-radius: 14px; background: var(--xp-blanco); transition: border-color .15s ease, box-shadow .15s ease; }
.xp-bc__tipo:hover { border-color: #CDBFD4; }
.xp-bc__tipo:has(input:checked) { border-color: var(--xp-ciruela); box-shadow: 0 0 0 1px var(--xp-ciruela); }
.xp-bc__tipo:has(input:focus-visible) { outline: 3px solid var(--xp-rosa-boton); outline-offset: 2px; }
.xp-bc__tipo-texto { display: grid; gap: .1rem; font-size: .8125rem; line-height: 1.35; color: var(--xp-gris); }
.xp-bc__tipo-texto strong { font-family: var(--xp-f-ui); font-size: .9375rem; line-height: 1.25; color: var(--xp-ciruela); }
.xp-bc__tipo-icono { flex: none; width: 34px; height: 34px; border-radius: 10px; background: #F4EEF6 center / 18px no-repeat; }
.xp-bc__tipo:has(input:checked) .xp-bc__tipo-icono { background-color: #FDE5EC; }
.xp-bc__tipo--personal .xp-bc__tipo-icono { background-image: url("data:image/svg+xml;utf8,"); }
.xp-bc__tipo--empresa .xp-bc__tipo-icono { background-image: url("data:image/svg+xml;utf8,"); }
.xp-bc__tipo--tienda .xp-bc__tipo-icono { background-image: url("data:image/svg+xml;utf8,"); }
.xp-bc__extras { margin-top: .1rem; }
.xp-bc__con[hidden], .xp-bc__fichas[hidden] { display: none; }
.xp-bc__campo--ciudad { margin-top: .8rem; }
/* «Ver mi boceto»: cuando el boceto va debajo del panel (tableta y móvil) */
.xp-bc__ir { display: flex; align-items: center; justify-content: center; gap: .4rem; min-height: 48px; border: 1.5px solid var(--xp-ciruela); border-radius: 999px; font: 600 .9375rem var(--xp-f-ui); color: var(--xp-ciruela); text-decoration: none; }
.xp-bc__ir:focus-visible { outline: 3px solid var(--xp-rosa-boton); outline-offset: 2px; }
/* Los cuatro estilos, con una muestra de cada uno */
.xp-bc__estilos { display: grid; gap: .5rem; }
.xp-bc__estilo { display: flex; align-items: center; gap: .85rem; padding: .55rem .7rem .55rem .55rem; border: 1.5px solid var(--xp-linea); border-radius: 14px; background: var(--xp-blanco); transition: border-color .15s ease, box-shadow .15s ease; }
.xp-bc__estilo:hover { border-color: #CDBFD4; }
.xp-bc__estilo:has(input:checked) { border-color: var(--xp-ciruela); box-shadow: 0 0 0 1px var(--xp-ciruela); }
.xp-bc__estilo:has(input:focus-visible) { outline: 3px solid var(--xp-rosa-boton); outline-offset: 2px; }
.xp-bc__estilo-texto { display: grid; gap: .1rem; font-size: .8125rem; line-height: 1.35; color: var(--xp-gris); }
.xp-bc__estilo-texto strong { font-family: var(--xp-f-ui); font-size: .9375rem; color: var(--xp-ciruela); }
.xp-bc__muestra { position: relative; display: grid; align-content: center; flex: none; width: 64px; height: 52px; padding: 0 .55rem; overflow: hidden; }
.xp-bc__muestra b { line-height: 1; }
.xp-bc__muestra i { display: block; height: 4px; margin-top: 4px; }
.xp-bc__muestra i + i { width: 60%; }
.xp-bc__estilo--cercano .xp-bc__muestra { border-radius: 14px; background: #F6EDF4; }
.xp-bc__estilo--cercano .xp-bc__muestra b { font: 700 1.25rem var(--xp-f-texto); color: var(--xp-ciruela); }
.xp-bc__estilo--cercano .xp-bc__muestra i { border-radius: 4px; background: var(--xp-rosa-boton); opacity: .55; }
.xp-bc__estilo--minimal .xp-bc__muestra { border: 1px solid #E4E4E4; background: #FFFFFF; }
.xp-bc__estilo--minimal .xp-bc__muestra b { font: 500 1.3rem var(--xp-f-ui); letter-spacing: -.05em; color: #111111; }
.xp-bc__estilo--minimal .xp-bc__muestra i { height: 1.5px; background: #111111; }
.xp-bc__estilo--minimal .xp-bc__muestra i + i { background: #C4C4C4; }
.xp-bc__estilo--elegante .xp-bc__muestra { border: 1px solid #E3D9CC; border-radius: 26px 26px 0 0; background: #F8F4EE; }
.xp-bc__estilo--elegante .xp-bc__muestra b { font: italic 400 1.4rem "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; color: #221D19; }
.xp-bc__estilo--elegante .xp-bc__muestra i { height: 1px; background: #8A7F73; }
.xp-bc__estilo--atrevido .xp-bc__muestra { background: #0D0D10; }
.xp-bc__estilo--atrevido .xp-bc__muestra b { font: 800 1.3rem var(--xp-f-texto); letter-spacing: -.04em; text-transform: uppercase; color: #FFFFFF; }
.xp-bc__estilo--atrevido .xp-bc__muestra i { height: 5px; background: #F3285C; }
.xp-bc__nota-estilo { margin: .6rem 0 0; font-size: .8125rem; line-height: 1.45; color: var(--xp-gris); }
.xp-bc__campo { display: grid; gap: .4rem; margin: 0; }
.xp-bc__campo label, .xp-bc__etiqueta { margin: 0; font-family: var(--xp-f-ui); font-size: .875rem; font-weight: 600; color: var(--xp-ciruela); }
.xp-bc__campo label span { font-weight: 400; color: var(--xp-gris); }
.xp-bc__etiqueta { margin-top: 1rem; margin-bottom: .5rem; }
.xp-bc__campo :is(input, textarea) {
width: 100%; min-height: 48px; margin: 0; padding: .65rem .9rem; border: 1.5px solid #CDBFD4; border-radius: 12px;
background: var(--xp-blanco); color: var(--xp-ciruela-oscuro); font: 1rem/1.45 var(--xp-f-texto); box-shadow: none;
}
.xp-bc__campo textarea { min-height: 5rem; resize: vertical; }
.xp-bc__campo :is(input, textarea):focus { outline: 3px solid var(--xp-rosa-boton); outline-offset: 2px; border-color: var(--xp-ciruela); }
.xp-bc__colores { display: flex; flex-wrap: wrap; gap: .6rem; }
.xp-bc__color { position: relative; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--c1) 50%, var(--c2) 50%); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); cursor: pointer; }
.xp-bc__color:has(input:checked) { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12), 0 0 0 3px var(--xp-blanco), 0 0 0 5px var(--xp-ciruela); }
.xp-bc__color:has(input:focus-visible) { outline: 3px solid var(--xp-rosa-boton); outline-offset: 5px; }
.xp-bc__aviso { margin: .5rem 0 0; font-size: .875rem; color: var(--xp-gris); }
/* ---------- El marco: navegador o móvil ---------- */
.xp-bc__barra-vista { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; margin-bottom: .75rem; }
.xp-bc__pista { display: flex; align-items: center; gap: .5rem; margin: 0; font-family: var(--xp-f-ui); font-size: .875rem; color: var(--xp-texto); }
.xp-bc__pista::before { content: "1"; display: grid; place-items: center; flex: none; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--xp-rosa-boton); font: 700 .75rem/1 var(--xp-f-ui); color: var(--xp-blanco); }
.xp-bc__vistas { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--xp-blanco); box-shadow: inset 0 0 0 1px var(--xp-linea); }
.xp-bc__vistas button { min-height: 36px; padding: .3rem .95rem; border: 0; border-radius: 999px; background: transparent; font: 600 .8125rem/1 var(--xp-f-ui); color: var(--xp-texto); cursor: pointer; }
.xp-bc__vistas button[aria-pressed="true"] { background: var(--xp-ciruela); color: var(--xp-blanco); }
.xp-bc__vistas button:focus-visible { outline: 3px solid var(--xp-rosa-boton); outline-offset: 2px; }
.xp-bc__marco { overflow: hidden; margin-inline: auto; border: 1px solid var(--xp-linea); border-radius: 14px; background: var(--xp-blanco); box-shadow: 0 2px 4px rgba(41, 31, 47, .06), 0 24px 60px -24px rgba(41, 31, 47, .35); transition: max-width .35s ease, border-radius .35s ease; }
.xp-bc__navegador { display: flex; align-items: center; gap: .9rem; padding: .55rem .8rem; border-bottom: 1px solid var(--xp-linea); background: #F4F0F6; }
.xp-bc__puntos { display: flex; gap: 6px; }
.xp-bc__puntos i { width: 10px; height: 10px; border-radius: 50%; background: #E0D6E6; }
.xp-bc__puntos i:first-child { background: #F39BAE; }
.xp-bc__url { flex: 1; max-width: 22rem; margin-inline: auto; padding: .25rem .8rem; border-radius: 999px; background: var(--xp-blanco); font: .8125rem/1.3 var(--xp-f-ui); color: var(--xp-gris); text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.xp-bc__pantalla { position: relative; height: clamp(520px, 72vh, 760px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.xp-bc__pantalla:focus-visible { outline: 3px solid var(--xp-rosa-boton); outline-offset: -3px; }
.xp-bc__marco[data-vista="movil"] { max-width: 390px; border: 10px solid #261C2B; border-radius: 42px; }
.xp-bc__marco[data-vista="movil"] .xp-bc__navegador { justify-content: center; padding-top: .9rem; }
.xp-bc__marco[data-vista="movil"] .xp-bc__puntos { display: none; }
.xp-bc__ejemplo { margin: .75rem 0 0; text-align: center; font-family: var(--xp-f-ui); font-size: .8125rem; color: var(--xp-gris); }
.xp-bc__siguiente { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.6rem; margin: .5rem 0 0; font: 600 .875rem var(--xp-f-ui); }
.xp-bc__siguiente a { color: var(--xp-ciruela); text-decoration: underline; text-decoration-color: var(--xp-rosa-boton); text-decoration-thickness: 2px; text-underline-offset: 4px; }
/* En el móvil, mientras se ve el boceto, fuera la barra fija de la web (boceto.js): si no, hay dos barras con botones */
html.xp-bc-viendo .xp-barra { transform: translateY(110%); visibility: hidden; }
/* ==========================================================================
La web del boceto: lo común
========================================================================== */
.xp-bc__web {
--bc1: #1A1A1A; --bc2: #1A1A1A; --bc3: #F3F3F1; --bctb: #FFFFFF;
--fondo: #FFFFFF; --texto: #4A4550; --tenue: #75707B; --tit: var(--xp-f-texto); --peso: 700; --tit-color: var(--bc1);
--linea: #ECEAEE; --suave: var(--bc3); --r: 14px; --dura: #FFFFFF;
position: relative; min-height: 100%; container-type: inline-size; background: var(--fondo); color: var(--texto); font: 15px/1.55 var(--xp-f-ui); text-align: left;
}
.xp-bc__web p { margin: 0; }
.xp-bc__web ul, .xp-bc__web ol { margin: 0; padding: 0; list-style: none; }
.xp-bc__web figure { margin: 0; }
.xp-bc-s { position: relative; padding: 2.6rem 2.4rem; outline: 2px dashed transparent; outline-offset: -6px; transition: outline-color .2s ease; }
.xp-bc-s.is-activo { outline-color: var(--xp-rosa-boton); }
.xp-bc-h1, .xp-bc-h2, .xp-bc-h3, .xp-bc-logo { font-family: var(--tit); font-weight: var(--peso); color: var(--tit-color); letter-spacing: -.01em; }
.xp-bc-h1 { margin: .4rem 0 .8rem !important; font-size: clamp(1.7rem, 4.8cqi, 2.8rem); line-height: 1.08; text-wrap: balance; }
.xp-bc-h2 { margin-bottom: 1.2rem !important; font-size: clamp(1.35rem, 3.3cqi, 1.9rem); line-height: 1.15; text-wrap: balance; }
.xp-bc-h3 { margin: .8rem 0 .25rem !important; font-size: 1.0625rem; line-height: 1.3; }
.xp-bc-ante { font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--bc2); }
.xp-bc__web[data-color="negro"] .xp-bc-ante { color: #8A6A2E; } /* el oro, como texto pequeño, no llega al contraste AA */
.xp-bc-sub { max-width: 34em; font-size: 1.0625rem; color: var(--texto); }
.xp-bc-botones { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; margin-top: 1.4rem !important; }
.xp-bc-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: .6rem 1.25rem; border: 2px solid var(--bc2); border-radius: 999px; background: var(--bc2); font-weight: 600; font-size: .875rem; color: var(--bctb); white-space: nowrap; }
.xp-bc-btn--sec { border-color: var(--tit-color); background: transparent; color: var(--tit-color); }
.xp-bc-enlace { display: inline-block; margin-top: .6rem; font-weight: 600; font-size: .875rem; color: var(--tit-color); text-decoration: underline; text-decoration-color: var(--bc2); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.xp-bc-nota { margin-top: .9rem !important; font-size: .8125rem; color: var(--tenue); }
.xp-bc-estrellas { color: #E8A33D; letter-spacing: 1px; }
.xp-bc-s--servicios .xp-bc-h2, .xp-bc-s--opiniones .xp-bc-h2, .xp-bc-s--tienda .xp-bc-h2, .xp-bc-s--academia .xp-bc-h2, .xp-bc-s--galeria .xp-bc-h2, .xp-bc-s--proceso .xp-bc-h2, .xp-bc-s--faq .xp-bc-h2, .xp-bc-s--equipo :is(.xp-bc-h2, .xp-bc-ante) { text-align: center; }
/* Fotos de mentira: degradado con los colores del boceto y un paisaje (o una persona) dibujado */
.xp-bc-img { position: relative; aspect-ratio: 16 / 10; border-radius: var(--r); background: linear-gradient(135deg, color-mix(in srgb, var(--bc2) 30%, #FFFFFF), color-mix(in srgb, var(--bc1) 24%, #FFFFFF)); }
.xp-bc-img::after {
content: ""; position: absolute; inset: 0; margin: auto; width: 34%; max-width: 72px; aspect-ratio: 1; opacity: .6;
background: url("data:image/svg+xml;utf8,") center / contain no-repeat;
}
.xp-bc-img--persona::after { width: 46%; max-width: 96px; background-image: url("data:image/svg+xml;utf8,"); }
.xp-bc-img--curso::after { opacity: .9; background-image: url("data:image/svg+xml;utf8,"); }
.xp-bc-img--producto { aspect-ratio: 1; }
.xp-bc-img--retrato { flex: none; width: 128px; aspect-ratio: 1; border-radius: 50%; }
.xp-bc-s.is-grande .xp-bc-img--retrato { width: 180px; }
/* Cabecera */
.xp-bc-s--cabecera { padding-top: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--linea); }
.xp-bc-s--cabecera .xp-bc-s__in { display: flex; align-items: center; gap: 1.3rem; }
.xp-bc-logo { display: flex; align-items: center; gap: .45rem; margin-right: auto !important; font-size: 1.125rem; white-space: nowrap; }
.xp-bc-menu { display: flex; gap: 1.2rem; font-size: .875rem; color: var(--tenue); white-space: nowrap; }
.xp-bc .xp-bc__web :is(.xp-bc-logo, .xp-bc-menu) { white-space: nowrap; text-wrap: nowrap; } /* el tema equilibra los párrafos de main (text-wrap: balance) */
.xp-bc-hamb { display: none; flex-direction: column; gap: 4px; }
.xp-bc-hamb i { width: 22px; height: 2px; border-radius: 2px; background: var(--tit-color); }
.xp-bc-alumnos { display: inline-flex; align-items: center; gap: .35rem; font-size: .8125rem; font-weight: 600; color: var(--tit-color); white-space: nowrap; }
.xp-bc-alumnos::before { content: ""; width: 15px; height: 15px; background: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; }
/* Con tienda y academia el menú crece: en pantallas medianas se quedan los tres primeros apartados (el minimalista los
baja a otra fila) */
@container (max-width: 1000px) {
.xp-bc__web:not([data-estilo="minimal"]) .xp-bc-alumnos { display: none; }
.xp-bc__web:is([data-estilo="cercano"], [data-estilo="atrevido"]) .xp-bc-menu span:nth-child(n+4) { display: none; }
}
.xp-bc-carrito { position: relative; flex: none; width: 24px; height: 24px; color: var(--tit-color); }
.xp-bc-carrito::before { content: ""; position: absolute; inset: 0; background: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; }
.xp-bc-carrito b { position: absolute; top: -6px; right: -8px; display: grid; place-items: center; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 999px; background: var(--bc2); font: 700 .625rem/1 var(--xp-f-ui); color: var(--bctb); }
/* Primera pantalla, sobre mí, tarjetas */
.xp-bc-s--hero .xp-bc-s__in { display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 2.4rem; }
.xp-bc-s--sobre .xp-bc-s__in { display: flex; align-items: center; gap: 2rem; }
.xp-bc-s--sobre p:not([class]) { max-width: 36em; }
.xp-bc-tarjetas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.xp-bc-tarjeta p:not([class]) { font-size: .875rem; }
.xp-bc-tarjeta .xp-bc-btn { margin-top: .7rem; min-height: 38px; font-size: .8125rem; }
.xp-bc-precio { margin-top: .2rem !important; font-weight: 700; color: var(--tit-color); }
.xp-bc-nivel { display: inline-block; margin-top: .7rem !important; padding: .15rem .55rem; border-radius: 999px; background: var(--suave); font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tit-color); }
.xp-bc-curso .xp-bc-h3 { margin-top: .4rem !important; }
.xp-bc-ventajas { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.8rem; margin-top: 1.5rem !important; font-size: .8125rem; font-weight: 600; color: var(--tit-color); }
.xp-bc-ventajas li { display: flex; align-items: center; gap: .4rem; }
.xp-bc-ventajas li::before { content: "✓"; color: var(--bc2); font-weight: 800; }
/* Confianza */
.xp-bc-s--confianza { padding-top: 1.3rem; padding-bottom: 1.3rem; }
.xp-bc-checks { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem 2rem; }
.xp-bc-checks li { display: flex; align-items: center; gap: .5rem; font-weight: 600; font-size: .875rem; color: var(--tit-color); }
/* Me has visto en (marca personal) */
.xp-bc-s--medios { padding-top: 1.8rem; padding-bottom: 1.8rem; text-align: center; }
.xp-bc-s--medios.is-grande { background: var(--suave); }
.xp-bc-s--medios .xp-bc-ante { color: var(--tenue); }
.xp-bc-medios { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .7rem 2.2rem; margin-top: .9rem !important; color: var(--tit-color); opacity: .55; }
.xp-bc-medio { font-size: 1.05rem; white-space: nowrap; }
.xp-bc-medio--1 { font: italic 700 1.15rem Georgia, serif; }
.xp-bc-medio--2 { font-weight: 800; letter-spacing: .3em; }
.xp-bc-medio--3 { font-weight: 600; font-size: 1.15rem; letter-spacing: -.03em; }
.xp-bc-medio--4 { font-weight: 700; font-size: .9rem; letter-spacing: .12em; }
.xp-bc-medio--5 { font: 700 1.2rem Georgia, serif; letter-spacing: -.02em; }
/* El equipo (web corporativa) */
.xp-bc-equipo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; max-width: 46rem; margin-inline: auto; text-align: center; }
.xp-bc__web .xp-bc-equipo .xp-bc-img--retrato { width: 100%; max-width: 150px; margin-inline: auto; }
.xp-bc-persona .xp-bc-h3 { margin-top: .7rem !important; }
.xp-bc-persona p:not([class]) { font-size: .8125rem; color: var(--tenue); }
.xp-bc-s--equipo .xp-bc-botones { justify-content: center; }
.xp-bc-s--equipo.is-grande { background: var(--suave); }
/* Contacto, reserva, presupuesto y guía gratis: la acción */
.xp-bc-s--contacto, .xp-bc-s--reserva, .xp-bc-s--presupuesto, .xp-bc-s--suscripcion { background: var(--suave); }
.xp-bc-s--contacto .xp-bc-s__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
.xp-bc-telefono { font-family: var(--tit); font-size: clamp(1.6rem, 4.2cqi, 2.3rem); font-weight: var(--peso); color: var(--tit-color); }
.xp-bc-s--contacto .xp-bc-botones { margin-top: .6rem !important; }
.xp-bc-s--reserva .xp-bc-s__in, .xp-bc-s--presupuesto .xp-bc-s__in { max-width: 38rem; margin-inline: auto; padding: 1.6rem; border-radius: var(--r); background: var(--fondo); box-shadow: 0 14px 34px -20px rgba(0, 0, 0, .35); text-align: center; }
.xp-bc-calendario { display: grid; justify-items: center; gap: .75rem; }
.xp-bc-dias { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; }
.xp-bc-dias span { padding: .4rem .75rem; border: 1px solid var(--linea); border-radius: calc(var(--r) * .6); font-size: .8125rem; color: var(--texto); }
.xp-bc-dias span.is-elegido { border-color: var(--bc2); background: var(--bc2); color: var(--bctb); }
.xp-bc-campos { display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem; margin-top: .9rem; }
.xp-bc-input { flex: 1 1 8rem; padding: .6rem .85rem; border: 1px solid var(--linea); border-radius: calc(var(--r) * .6); background: var(--fondo); font-size: .875rem; color: var(--tenue); text-align: left; }
.xp-bc-etq { margin-bottom: .55rem !important; font-size: .8125rem; font-weight: 600; color: var(--tit-color); }
.xp-bc-s--suscripcion .xp-bc-s__in { display: grid; grid-template-columns: 170px 1fr; align-items: center; gap: 2.2rem; max-width: 44rem; margin-inline: auto; }
.xp-bc-s--suscripcion .xp-bc-campos { justify-content: flex-start; }
.xp-bc-s--suscripcion .xp-bc-h2 { margin-top: .3rem !important; margin-bottom: .6rem !important; }
.xp-bc-guia { display: flex; align-items: flex-end; aspect-ratio: 3 / 4; padding: 1rem; border-radius: calc(var(--r) * .5); background: linear-gradient(160deg, var(--bc1), color-mix(in srgb, var(--bc1) 70%, #000000)); box-shadow: 12px 14px 28px -12px rgba(0, 0, 0, .45); transform: rotate(-4deg); }
.xp-bc-guia span { font: var(--peso) 1rem/1.2 var(--tit); color: #FFFFFF; }
/* Galería, proceso, preguntas, mapa */
.xp-bc-mosaico { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.xp-bc-mosaico .xp-bc-img { aspect-ratio: 1; }
.xp-bc-mosaico .xp-bc-img:first-child { grid-row: span 2; aspect-ratio: auto; }
.xp-bc-logos { display: grid; grid-template-columns: repeat(6, 1fr); gap: .8rem; }
.xp-bc-logos span { height: 42px; border-radius: 6px; background: var(--linea); }
.xp-bc-pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; counter-reset: bc-paso; }
.xp-bc-pasos li { counter-increment: bc-paso; text-align: center; }
.xp-bc-pasos li::before { content: counter(bc-paso); display: grid; place-items: center; width: 2.8rem; height: 2.8rem; margin: 0 auto .2rem; border-radius: 50%; background: var(--suave); font-family: var(--tit); font-size: 1.2rem; font-weight: 700; color: var(--bc2); }
.xp-bc-pasos p:not([class]) { font-size: .875rem; }
.xp-bc-faq { max-width: 40rem; margin-inline: auto !important; }
.xp-bc-faq li { display: flex; justify-content: space-between; gap: 1rem; padding: .95rem 0; border-bottom: 1px solid var(--linea); font-weight: 600; color: var(--tit-color); }
.xp-bc-faq span { color: var(--bc2); font-size: 1.25rem; line-height: 1; }
.xp-bc-s--zona .xp-bc-s__in { display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: 2.2rem; }
.xp-bc-mapa {
position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r); background-color: #EEF0EC;
background-image: linear-gradient(28deg, transparent 46%, #FFFFFF 46% 50%, transparent 50%), linear-gradient(-62deg, transparent 58%, #FFFFFF 58% 61%, transparent 61%),
repeating-linear-gradient(90deg, transparent 0 38px, #E2E5DF 38px 40px), repeating-linear-gradient(0deg, transparent 0 38px, #E2E5DF 38px 40px);
}
.xp-bc-mapa span { position: absolute; top: 42%; left: 48%; width: 22px; height: 22px; border-radius: 50% 50% 50% 0; background: var(--bc2); transform: rotate(-45deg); box-shadow: 0 4px 10px rgba(0, 0, 0, .25); }
/* Llamada final, pie y barra fija del móvil */
.xp-bc-s--cta { text-align: center; }
.xp-bc-s--cta .xp-bc-botones { justify-content: center; }
.xp-bc-s--pie { padding-top: 1.8rem; padding-bottom: 1.8rem; background: color-mix(in srgb, var(--bc1) 90%, #000000); color: rgba(255, 255, 255, .75); font-size: .8125rem; }
.xp-bc-s--pie .xp-bc-logo { margin-bottom: .45rem !important; color: #FFFFFF; }
.xp-bc-legal { margin-top: .6rem !important; opacity: .7; }
.xp-bc-s--barra { position: sticky; bottom: 0; z-index: 2; padding: .65rem .85rem; background: var(--fondo); box-shadow: 0 -6px 18px rgba(0, 0, 0, .14); }
.xp-bc-s--barra .xp-bc-s__in { display: flex; gap: .5rem; }
.xp-bc-s--barra .xp-bc-btn { flex: 1; min-width: 0; }
.xp-bc-s--barra .xp-bc-pin { top: -.9rem; }
/* ==========================================================================
Estilo 1 · Cálido y cercano
========================================================================== */
.xp-bc__web[data-estilo="cercano"] { --r: 22px; }
.xp-bc__web[data-estilo="cercano"] .xp-bc-logo__marca { width: 1.15rem; height: 1.15rem; border-radius: 50% 50% 50% 12%; background: var(--bc2); }
.xp-bc__web[data-estilo="cercano"] .xp-bc-s--hero { overflow: hidden; background: var(--suave); }
.xp-bc__web[data-estilo="cercano"] .xp-bc-s--hero::before { content: ""; position: absolute; right: -8%; top: -30%; width: 55%; aspect-ratio: 1; border-radius: 50%; background: color-mix(in srgb, var(--bc2) 12%, transparent); }
.xp-bc__web[data-estilo="cercano"] .xp-bc-hero__media { position: relative; }
.xp-bc__web[data-estilo="cercano"] .xp-bc-img--hero { aspect-ratio: 1 / .95; border-radius: 58% 42% 38% 62% / 46% 52% 48% 54%; }
.xp-bc-sello { position: absolute; left: -1.2rem; bottom: 1.2rem; display: grid; grid-template-columns: auto auto; align-items: center; gap: 0 .4rem; padding: .7rem .9rem; border-radius: 16px; background: #FFFFFF; box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .3); font-size: .75rem; color: var(--tenue); }
.xp-bc-sello .xp-bc-estrellas { grid-column: 1 / -1; font-size: .8rem; }
.xp-bc-sello strong { font-family: var(--tit); font-size: 1.35rem; color: var(--tit-color); }
.xp-bc__web[data-estilo="cercano"] .xp-bc-checks li { padding: .45rem .9rem .45rem .5rem; border-radius: 999px; background: var(--suave); }
.xp-bc__web[data-estilo="cercano"] .xp-bc-checks li::before { content: ""; flex: none; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--bc2) url("data:image/svg+xml;utf8,") center / 70% no-repeat; }
.xp-bc__web[data-estilo="cercano"] .xp-bc-tarjeta { padding: .8rem .8rem 1.1rem; border-radius: var(--r); background: #FFFFFF; box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .35); }
.xp-bc__web[data-estilo="cercano"] .xp-bc-tarjeta .xp-bc-img { border-radius: 16px; }
.xp-bc__web[data-estilo="cercano"] .xp-bc-s--sobre { background: var(--suave); }
.xp-bc__web[data-estilo="cercano"] .xp-bc-img--retrato { border-radius: 50% 50% 50% 18%; }
.xp-bc-charla { display: grid; gap: 1rem; max-width: 38rem; margin-inline: auto; }
.xp-bc-dice { display: flex; align-items: flex-end; gap: .7rem; }
.xp-bc-dice:nth-child(2) { flex-direction: row-reverse; text-align: right; }
.xp-bc-inicial { display: grid; place-items: center; flex: none; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--bc2); font: 700 1rem var(--tit); color: var(--bctb); }
.xp-bc-dice > div { padding: .85rem 1.1rem; border-radius: 20px 20px 20px 6px; background: var(--suave); }
.xp-bc-dice:nth-child(2) > div { border-radius: 20px 20px 6px 20px; }
.xp-bc-dice .xp-bc-cita { font-size: 1rem; color: var(--tit-color); }
.xp-bc-dice .xp-bc-quien { margin-top: .3rem !important; font-size: .75rem; color: var(--tenue); }
.xp-bc-cta__caja { position: relative; overflow: hidden; padding: 2.4rem 1.6rem; border-radius: 28px; background: var(--bc1); }
.xp-bc-cta__caja::before { content: ""; position: absolute; left: -10%; bottom: -60%; width: 45%; aspect-ratio: 1; border-radius: 50%; background: color-mix(in srgb, var(--bc2) 30%, transparent); }
.xp-bc-cta__caja > * { position: relative; }
.xp-bc-cta__caja :is(.xp-bc-h2, p) { color: #FFFFFF; }
.xp-bc-cta__caja .xp-bc-btn { border-color: #FFFFFF; background: #FFFFFF; color: var(--bc1); }
.xp-bc-cta__caja .xp-bc-btn--sec { background: transparent; color: #FFFFFF; }
.xp-bc__web[data-color="neutro"][data-estilo="cercano"] .xp-bc-cta__caja::before { background: rgba(255, 255, 255, .08); }
/* ==========================================================================
Estilo 2 · Editorial minimalista: blanco, letra limpia, apartados numerados y el menú siempre a la vista
========================================================================== */
.xp-bc__web[data-estilo="minimal"] {
--fondo: #FFFFFF; --texto: #444444; --tenue: #767676; --tit: var(--xp-f-ui); --peso: 500; --tit-color: #111111;
--linea: #E6E6E6; --suave: #F6F6F4; --r: 4px;
counter-reset: bc-min;
}
.xp-bc__web[data-estilo="minimal"] .xp-bc-s { padding-top: 3rem; padding-bottom: 3rem; }
.xp-bc__web[data-estilo="minimal"] .xp-bc-s + .xp-bc-s:not(.xp-bc-s--barra) { border-top: 1px solid var(--linea); }
.xp-bc__web[data-estilo="minimal"] :is(.xp-bc-h1, .xp-bc-h2, .xp-bc-logo, .xp-bc-telefono) { letter-spacing: -.035em; }
.xp-bc__web[data-estilo="minimal"] .xp-bc-h1 { max-width: 15em; font-size: clamp(2rem, 6.2cqi, 3.8rem); line-height: 1.02; }
.xp-bc__web[data-estilo="minimal"] .xp-bc-h2 { font-size: clamp(1.4rem, 3.4cqi, 2.1rem); line-height: 1.1; }
.xp-bc__web[data-estilo="minimal"] .xp-bc-h3 { font-weight: 500; letter-spacing: -.01em; }
/* Cada apartado lleva su número, como un índice */
.xp-bc__web[data-estilo="minimal"] :is(.xp-bc-s--servicios, .xp-bc-s--opiniones, .xp-bc-s--faq, .xp-bc-s--proceso, .xp-bc-s--tienda, .xp-bc-s--academia, .xp-bc-s--galeria) { counter-increment: bc-min; }
.xp-bc__web[data-estilo="minimal"] :is(.xp-bc-s--servicios, .xp-bc-s--opiniones, .xp-bc-s--faq, .xp-bc-s--proceso, .xp-bc-s--tienda, .xp-bc-s--academia, .xp-bc-s--galeria) .xp-bc-h2::before { content: counter(bc-min, decimal-leading-zero); display: block; margin-bottom: .7rem; font-size: .75rem; font-weight: 500; letter-spacing: .06em; color: var(--tenue); }
.xp-bc__web[data-estilo="minimal"] .xp-bc-ante { font-weight: 500; letter-spacing: .1em; color: var(--tenue); }
.xp-bc__web[data-estilo="minimal"] :is(.xp-bc-h2, .xp-bc-ante) { text-align: left !important; }
.xp-bc__web[data-estilo="minimal"] .xp-bc-btn { min-height: 44px; padding: .6rem 1.2rem; border-color: var(--bc1); border-radius: 4px; background: var(--bc1); font-weight: 500; color: #FFFFFF; }
.xp-bc__web[data-estilo="minimal"] .xp-bc-btn--sec { background: transparent; color: var(--bc1); }
.xp-bc__web[data-estilo="minimal"] .xp-bc-enlace { margin: 0; font-weight: 500; text-decoration-thickness: 1px; }
.xp-bc__web[data-estilo="minimal"] .xp-bc-img { background: linear-gradient(160deg, color-mix(in srgb, var(--bc1) 7%, #F2F2F0), color-mix(in srgb, var(--bc1) 16%, #DCDCD8)); }
/* Cabecera: todos los apartados a la vista, el actual subrayado */
.xp-bc__web[data-estilo="minimal"] .xp-bc-s--cabecera { padding-top: 1.1rem; padding-bottom: 1.1rem; }
.xp-bc__web[data-estilo="minimal"] .xp-bc-logo { font-size: 1.15rem; }
.xp-bc__web[data-estilo="minimal"] .xp-bc-menu { gap: 1.4rem; color: var(--texto); }
.xp-bc__web[data-estilo="minimal"] .xp-bc-menu .is-actual { color: var(--tit-color); box-shadow: inset 0 -1px 0 var(--tit-color); }
.xp-bc__web[data-estilo="minimal"] .xp-bc-s--cabecera .xp-bc-btn { min-height: 38px; padding: .4rem .9rem; font-size: .8125rem; }
/* Si no caben en una línea, los apartados bajan a una fila propia bajo el logo (nunca se esconden en un botón) */
@container (max-width: 1100px) {
.xp-bc__web[data-estilo="minimal"] .xp-bc-s--cabecera { padding-bottom: 0; }
.xp-bc__web[data-estilo="minimal"] .xp-bc-s--cabecera .xp-bc-s__in { flex-wrap: wrap; row-gap: .8rem; }
.xp-bc__web[data-estilo="minimal"] .xp-bc-s--cabecera .xp-bc-menu { order: 3; display: flex; flex: 0 0 100%; padding: .75rem 0; overflow-x: auto; border-top: 1px solid var(--linea); scrollbar-width: none; }
}
/* Primera pantalla: titular grande arriba y la foto a lo ancho (o tu retrato al lado, en una marca personal) */
.xp-bc__web[data-estilo="minimal"] .xp-bc-s--hero { padding-top: 3.4rem; }
.xp-bc__web[data-estilo="minimal"] .xp-bc-s--hero .xp-bc-s__in { display: block; }
.xp-bc-hero__pie { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 1rem 2.4rem; margin-top: 1.6rem; }
.xp-bc__web[data-estilo="minimal"] .xp-bc-hero__pie .xp-bc-botones { margin-top: 0 !important; gap: 1.2rem; }
.xp-bc__web[data-estilo="minimal"] .xp-bc-hero__media { margin-top: 2.2rem; }
.xp-bc-img--ancha { aspect-ratio: 21 / 9; }
.xp-bc__web[data-estilo="minimal"][data-tipo="personal"] .xp-bc-s--hero .xp-bc-s__in { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .8fr); align-items: end; gap: 2.4rem; }
.xp-bc__web[data-estilo="minimal"][data-tipo="personal"] .xp-bc-hero__pie { display: block; }
.xp-bc__web[data-estilo="minimal"][data-tipo="personal"] .xp-bc-hero__pie .xp-bc-botones { margin-top: 1.4rem !important; }
.xp-bc__web[data-estilo="minimal"][data-tipo="personal"] .xp-bc-hero__media { margin-top: 0; }
.xp-bc__web[data-estilo="minimal"][data-tipo="personal"] .xp-bc-img--hero { aspect-ratio: 4 / 5; }
/* Confianza: una línea de datos, separados por filetes */
.xp-bc__web[data-estilo="minimal"] .xp-bc-s--confianza { padding-top: 1.1rem; padding-bottom: 1.1rem; }
.xp-bc__web[data-estilo="minimal"] .xp-bc-checks { justify-content: flex-start; gap: .4rem 0; }
.xp-bc__web[data-estilo="minimal"] .xp-bc-checks li { padding: 0 1.4rem; border-left: 1px solid var(--linea); font-weight: 500; color: var(--texto); }
.xp-bc__web[data-estilo="minimal"] .xp-bc-checks li:first-child { padding-left: 0; border-left: 0; }
/* Apartados a dos columnas: el título (con su número) a la izquierda y el contenido a la derecha */
.xp-bc__web[data-estilo="minimal"] :is(.xp-bc-s--servicios, .xp-bc-s--opiniones, .xp-bc-s--faq, .xp-bc-s--proceso, .xp-bc-s--tienda, .xp-bc-s--academia, .xp-bc-s--galeria) .xp-bc-s__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr); align-items: start; gap: 0 2.4rem; }
.xp-bc__web[data-estilo="minimal"] :is(.xp-bc-s--servicios, .xp-bc-s--opiniones, .xp-bc-s--faq, .xp-bc-s--proceso, .xp-bc-s--tienda, .xp-bc-s--academia, .xp-bc-s--galeria) .xp-bc-s__in > .xp-bc-h2 { grid-row: 1 / span 3; }
.xp-bc__web[data-estilo="minimal"] :is(.xp-bc-s--servicios, .xp-bc-s--opiniones, .xp-bc-s--faq, .xp-bc-s--proceso, .xp-bc-s--tienda, .xp-bc-s--academia, .xp-bc-s--galeria) .xp-bc-s__in > :not(.xp-bc-h2) { grid-column: 2; }
.xp-bc__web[data-estilo="minimal"] .xp-bc-filas { max-width: none; margin-inline: 0 !important; border-top: 1px solid var(--tit-color); }
.xp-bc__web[data-estilo="minimal"] .xp-bc-filas li { grid-template-columns: 2.6rem 1fr auto; align-items: baseline; padding: 1.2rem 0; }
.xp-bc__web[data-estilo="minimal"] .xp-bc-filas__n { font: 500 .8125rem var(--xp-f-ui); color: var(--tenue); }
.xp-bc__web[data-estilo="minimal"] .xp-bc-filas .xp-bc-h3 { margin: 0 0 .2rem !important; font-size: 1.2rem; }
.xp-bc__web[data-estilo="minimal"] .xp-bc-filas .xp-bc-enlace { text-decoration: none; }
.xp-bc-citas { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1.6rem; }
.xp-bc-citas figure { padding-top: 1rem; border-top: 1px solid var(--tit-color); }
.xp-bc-citas .xp-bc-cita { font-size: 1.0625rem; line-height: 1.45; color: var(--tit-color); }
.xp-bc-citas .xp-bc-quien { margin-top: .8rem !important; font-size: .75rem; color: var(--tenue); }
.xp-bc__web[data-estilo="minimal"] .xp-bc-faq { max-width: none; margin-inline: 0 !important; border-top: 1px solid var(--tit-color); }
.xp-bc__web[data-estilo="minimal"] .xp-bc-faq li { font-weight: 500; }
.xp-bc__web[data-estilo="minimal"] .xp-bc-faq span { color: var(--tit-color); font-weight: 300; }
.xp-bc__web[data-estilo="minimal"] .xp-bc-pasos { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.xp-bc__web[data-estilo="minimal"] .xp-bc-pasos li { padding-top: 1rem; border-top: 1px solid var(--tit-color); text-align: left; }
.xp-bc__web[data-estilo="minimal"] .xp-bc-pasos li::before { display: block; width: auto; height: auto; margin: 0 0 .3rem; border-radius: 0; background: none; font: 500 .8125rem var(--xp-f-ui); color: var(--tenue); }
.xp-bc__web[data-estilo="minimal"] .xp-bc-tarjetas { grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); }
.xp-bc__web[data-estilo="minimal"] .xp-bc-ventajas { justify-content: flex-start; font-weight: 500; }
.xp-bc__web[data-estilo="minimal"] .xp-bc-ventajas li::before { color: var(--tit-color); }
.xp-bc__web[data-estilo="minimal"] .xp-bc-nivel { padding: 0; border-radius: 0; background: none; color: var(--tenue); font-weight: 500; }
/* Sobre mí, equipo y medios: sobrios */
.xp-bc__web[data-estilo="minimal"] .xp-bc-img--retrato { width: 160px; aspect-ratio: 4 / 5; border-radius: 4px; }
.xp-bc__web[data-estilo="minimal"] .xp-bc-s--sobre .xp-bc-s__in { align-items: flex-end; }
.xp-bc__web[data-estilo="minimal"] .xp-bc-equipo { max-width: none; text-align: left; }
.xp-bc__web[data-estilo="minimal"] .xp-bc-s--equipo .xp-bc-botones { justify-content: flex-start; }
.xp-bc__web[data-estilo="minimal"] :is(.xp-bc-s--equipo, .xp-bc-s--medios).is-grande { background: transparent; }
.xp-bc__web[data-estilo="minimal"] .xp-bc-s--medios { text-align: left; }
.xp-bc__web[data-estilo="minimal"] .xp-bc-medios { justify-content: flex-start; }
.xp-bc__web[data-estilo="minimal"] :is(.xp-bc-s--contacto, .xp-bc-s--reserva, .xp-bc-s--presupuesto, .xp-bc-s--suscripcion) { background: var(--fondo); }
.xp-bc__web[data-estilo="minimal"] :is(.xp-bc-s--reserva, .xp-bc-s--presupuesto) .xp-bc-s__in { border: 1px solid var(--linea); box-shadow: none; text-align: left; }
.xp-bc__web[data-estilo="minimal"] :is(.xp-bc-dias, .xp-bc-campos, .xp-bc-calendario) { justify-content: flex-start; justify-items: start; }
.xp-bc__web[data-estilo="minimal"] .xp-bc-guia { transform: none; box-shadow: none; border-radius: 2px; }
/* Llamada final: grande y sin adornos */
.xp-bc__web[data-estilo="minimal"] .xp-bc-s--cta { text-align: left; }
.xp-bc__web[data-estilo="minimal"] .xp-bc-s--cta .xp-bc-h2 { font-size: clamp(1.8rem, 5.4cqi, 3.2rem); }
.xp-bc__web[data-estilo="minimal"] .xp-bc-s--cta .xp-bc-botones { justify-content: flex-start; }
.xp-bc__web[data-estilo="minimal"] .xp-bc-s--pie { background: var(--suave); color: var(--texto); }
.xp-bc__web[data-estilo="minimal"] .xp-bc-s--pie .xp-bc-logo { color: var(--tit-color); }
.xp-bc__web[data-estilo="minimal"] .xp-bc-s--barra { box-shadow: none; border-top: 1px solid var(--linea); }
/* ==========================================================================
Estilo 3 · Elegante y clásico: marfil, serifa clásica en mayúsculas y minúsculas, fotos en arco y filetes finos
========================================================================== */
.xp-bc__web[data-estilo="elegante"] {
--fondo: #F8F4EE; --texto: #4E4740; --tenue: #857A6F; --tit: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif; --peso: 400; --tit-color: #221D19;
--linea: #E3D9CC; --suave: #F0E8DD; --r: 0px; --acento: color-mix(in srgb, var(--bc2) 82%, #000000); --arco: 999px 999px 0 0;
}
.xp-bc__web[data-estilo="elegante"] .xp-bc-s { padding-top: 3.4rem; padding-bottom: 3.4rem; }
.xp-bc__web[data-estilo="elegante"] :is(.xp-bc-h1, .xp-bc-h2) { letter-spacing: -.005em; }
.xp-bc__web[data-estilo="elegante"] .xp-bc-h1 { font-size: clamp(2.1rem, 5.6cqi, 3.6rem); line-height: 1.06; }
.xp-bc__web[data-estilo="elegante"] .xp-bc-h2 { font-size: clamp(1.6rem, 3.8cqi, 2.4rem); line-height: 1.12; }
.xp-bc__web[data-estilo="elegante"] .xp-bc-h3 { font-size: 1.25rem; letter-spacing: 0; }
.xp-bc__web[data-estilo="elegante"] :is(.xp-bc-h1, .xp-bc-h2) em { font-style: italic; color: var(--acento); }
.xp-bc__web[data-estilo="elegante"] .xp-bc-ante { font: italic 400 1.05rem var(--tit); letter-spacing: 0; text-transform: none; color: var(--acento); }
.xp-bc__web[data-estilo="elegante"] .xp-bc-ante::before { content: "— "; }
.xp-bc__web[data-estilo="elegante"] .xp-bc-sub { font-size: 1.0625rem; line-height: 1.65; }
.xp-bc__web[data-estilo="elegante"] .xp-bc-btn { min-height: 48px; padding: .75rem 1.7rem; border: 1px solid var(--bc1); border-radius: 0; background: var(--bc1); font-weight: 500; letter-spacing: .03em; color: #FFFFFF; }
.xp-bc__web[data-estilo="elegante"] .xp-bc-btn--sec { background: transparent; color: var(--bc1); }
.xp-bc__web[data-estilo="elegante"] .xp-bc-enlace { margin: 0; font: italic 400 1.05rem var(--tit); color: var(--tit-color); text-decoration-thickness: 1px; text-decoration-color: var(--acento); text-underline-offset: 5px; }
.xp-bc__web[data-estilo="elegante"] .xp-bc-botones { gap: 1.4rem; }
.xp-bc__web[data-estilo="elegante"] .xp-bc-img { background: linear-gradient(170deg, #E9DFD2, color-mix(in srgb, var(--bc1) 20%, #CBBDAC)); }
/* Cabecera: logo en el centro, menús legibles a los lados */
.xp-bc__web[data-estilo="elegante"] .xp-bc-s--cabecera { padding-top: 1.2rem; padding-bottom: 1.2rem; }
.xp-bc__web[data-estilo="elegante"] .xp-bc-s--cabecera .xp-bc-s__in { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1.6rem; }
.xp-bc__web[data-estilo="elegante"] .xp-bc-logo { justify-content: center; margin: 0 !important; font-size: 1.45rem; letter-spacing: .02em; }
.xp-bc__web[data-estilo="elegante"] .xp-bc-menu { align-items: center; gap: 1.5rem; font-size: .875rem; color: var(--texto); }
.xp-bc__web[data-estilo="elegante"] .xp-bc-menu:last-of-type { justify-content: flex-end; }
.xp-bc__web[data-estilo="elegante"] .xp-bc-menu__cta { padding-bottom: 2px; border-bottom: 1px solid var(--acento); color: var(--tit-color); }
@container (max-width: 1080px) {
.xp-bc__web[data-estilo="elegante"] .xp-bc-menu:first-of-type span:nth-child(n+3), .xp-bc__web[data-estilo="elegante"] .xp-bc-menu:last-of-type span:not(.xp-bc-menu__cta, .xp-bc-carrito, .xp-bc-icono):nth-child(n+2), .xp-bc__web[data-estilo="elegante"] .xp-bc-alumnos { display: none; }
}
@container (max-width: 940px) {
.xp-bc__web[data-estilo="elegante"] .xp-bc-menu:first-of-type span:nth-child(n+2), .xp-bc__web[data-estilo="elegante"] .xp-bc-menu:last-of-type span:not(.xp-bc-menu__cta, .xp-bc-carrito, .xp-bc-icono) { display: none; }
}
.xp-bc-menu__cta { color: var(--tit-color); border-bottom: 1px solid var(--bc2); }
/* Primera pantalla: texto a la izquierda y la foto en arco, con un filete desplazado detrás */
.xp-bc__web[data-estilo="elegante"] .xp-bc-s--hero { padding-top: 3.8rem; padding-bottom: 4.2rem; }
.xp-bc__web[data-estilo="elegante"] .xp-bc-s--hero .xp-bc-s__in { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 3.4rem; }
.xp-bc__web[data-estilo="elegante"] .xp-bc-hero__media { position: relative; max-width: 330px; justify-self: center; width: 100%; }
.xp-bc__web[data-estilo="elegante"] .xp-bc-hero__media::before { content: ""; position: absolute; inset: 1.1rem -1.1rem -1.1rem 1.1rem; border: 1px solid var(--acento); border-radius: var(--arco); opacity: .45; }
.xp-bc__web[data-estilo="elegante"] .xp-bc-img--hero { aspect-ratio: 4 / 5; border-radius: var(--arco); }
/* Confianza: en cursiva, entre filetes */
.xp-bc__web[data-estilo="elegante"] .xp-bc-s--confianza { padding-top: 1.2rem; padding-bottom: 1.2rem; border-block: 1px solid var(--linea); }
.xp-bc__web[data-estilo="elegante"] .xp-bc-checks { gap: .4rem 0; }
.xp-bc__web[data-estilo="elegante"] .xp-bc-checks li { padding: 0 1.5rem; font: italic 400 1.0625rem var(--tit); color: var(--texto); }
.xp-bc__web[data-estilo="elegante"] .xp-bc-checks li + li { border-left: 1px solid var(--linea); }
/* Sobre mí, equipo, servicios y galería: fotos en arco */
.xp-bc__web[data-estilo="elegante"] .xp-bc-s--sobre { background: var(--suave); }
.xp-bc__web[data-estilo="elegante"] .xp-bc-img--retrato { width: 170px; aspect-ratio: 3 / 4; border-radius: var(--arco); }
.xp-bc__web[data-estilo="elegante"] .xp-bc-s--sobre .xp-bc-s__in { gap: 2.6rem; }
.xp-bc__web[data-estilo="elegante"] .xp-bc-s--servicios .xp-bc-tarjeta { text-align: center; }
.xp-bc__web[data-estilo="elegante"] .xp-bc-s--servicios .xp-bc-img { aspect-ratio: 4 / 5; border-radius: var(--arco); }
.xp-bc__web[data-estilo="elegante"] .xp-bc-tarjeta .xp-bc-h3 { margin-top: 1rem !important; }
.xp-bc__web[data-estilo="elegante"] .xp-bc-tarjeta .xp-bc-enlace { margin-top: .6rem; font-size: .95rem; }
.xp-bc__web[data-estilo="elegante"] .xp-bc-mosaico .xp-bc-img:first-child { border-radius: var(--arco); }
.xp-bc__web[data-estilo="elegante"] .xp-bc-nivel { padding: 0; border-radius: 0; background: none; font: italic 400 .95rem var(--tit); letter-spacing: 0; text-transform: none; color: var(--acento); }
.xp-bc__web[data-estilo="elegante"] .xp-bc-medio { font-family: var(--tit); }
.xp-bc__web[data-estilo="elegante"] .xp-bc-ventajas li { font: italic 400 1rem var(--tit); }
.xp-bc__web[data-estilo="elegante"] .xp-bc-ventajas li::before { content: "—"; color: var(--acento); font-weight: 400; }
.xp-bc__web[data-estilo="elegante"] .xp-bc-guia { transform: none; border-radius: var(--arco); box-shadow: none; outline: 1px solid var(--linea); outline-offset: 8px; align-items: center; justify-content: center; text-align: center; }
.xp-bc__web[data-estilo="elegante"] .xp-bc-guia span { font-style: italic; }
/* Opiniones: una sola cita, grande y en cursiva */
.xp-bc-gran-cita { max-width: 40rem; margin-inline: auto; text-align: center; }
.xp-bc-gran-cita::before { content: "“"; display: block; height: 3.2rem; font: 5rem/1 var(--tit); color: var(--acento, var(--bc2)); }
.xp-bc-gran-cita .xp-bc-cita { font: italic 400 clamp(1.4rem, 3.4cqi, 2rem)/1.35 var(--tit); color: var(--tit-color); }
.xp-bc-gran-cita .xp-bc-quien { margin-top: 1.1rem !important; font-size: .875rem; color: var(--tenue); }
.xp-bc-puntos { display: flex; justify-content: center; gap: .5rem; margin-top: 1.2rem !important; }
.xp-bc-puntos i { width: 7px; height: 7px; border: 1px solid var(--tenue); border-radius: 50%; }
.xp-bc-puntos i.is-on { background: var(--tenue); }
/* Reserva, presupuesto, proceso y preguntas */
.xp-bc__web[data-estilo="elegante"] :is(.xp-bc-s--reserva, .xp-bc-s--presupuesto) .xp-bc-s__in { border: 1px solid var(--linea); background: #FFFDF9; box-shadow: none; }
.xp-bc__web[data-estilo="elegante"] .xp-bc-pasos li::before { width: auto; height: auto; margin: 0 auto .3rem; border-radius: 0; background: none; font: italic 400 2.2rem/1 var(--tit); color: var(--acento); }
.xp-bc__web[data-estilo="elegante"] .xp-bc-faq li { font-family: var(--tit); font-size: 1.125rem; font-weight: 400; }
.xp-bc__web[data-estilo="elegante"] .xp-bc-faq span { color: var(--acento); font-weight: 300; }
/* Llamada final y pie */
.xp-bc__web[data-estilo="elegante"] .xp-bc-s--cta { background: var(--suave); }
.xp-bc__web[data-estilo="elegante"] .xp-bc-s--cta .xp-bc-h2 { font-size: clamp(1.8rem, 4.6cqi, 2.8rem); }
.xp-bc__web[data-estilo="elegante"] .xp-bc-s--pie { background: #221D19; color: rgba(248, 244, 238, .7); text-align: center; }
.xp-bc__web[data-estilo="elegante"] .xp-bc-s--pie .xp-bc-logo { justify-content: center; margin-right: 0 !important; font-size: 1.3rem; color: #F8F4EE; }
.xp-bc__web[data-estilo="elegante"] .xp-bc-s--barra { box-shadow: none; border-top: 1px solid var(--linea); }
/* Servicios en filas (lo usa el minimalista) */
.xp-bc-filas { max-width: 44rem; margin-inline: auto !important; border-top: 1px solid var(--linea); }
.xp-bc-filas li { display: grid; grid-template-columns: 3.2rem 1fr auto; align-items: baseline; gap: 1.2rem; padding: 1.4rem 0; border-bottom: 1px solid var(--linea); }
.xp-bc-filas__n { font: italic 1.5rem var(--tit); color: var(--bc2); }
.xp-bc-filas .xp-bc-h3 { margin-top: 0 !important; font-size: 1.3rem; }
.xp-bc-filas p:not([class]) { font-size: .9rem; }
.xp-bc-filas .xp-bc-enlace { margin: 0; }
/* ==========================================================================
Estilo 4 · Moderno y atrevido
========================================================================== */
.xp-bc__web[data-estilo="atrevido"] {
--fondo: #0D0D10; --texto: #C9C9D2; --tenue: #8E8E99; --peso: 800; --tit-color: #FFFFFF;
--linea: #2A2A32; --suave: #16161B; --r: 0px;
}
/* En blanco y negro, el acento es el blanco (con !important: los colores van en línea, desde boceto.js) */
.xp-bc__web[data-estilo="atrevido"][data-color="neutro"] { --bc2: #FFFFFF !important; --bctb: #0D0D10 !important; --dura: #5C5C66; }
.xp-bc__web[data-estilo="atrevido"] :is(.xp-bc-h1, .xp-bc-h2, .xp-bc-logo) { text-transform: uppercase; letter-spacing: -.03em; }
.xp-bc__web[data-estilo="atrevido"] .xp-bc-h2 { font-size: clamp(1.6rem, 4.6cqi, 2.6rem); line-height: 1; }
.xp-bc__web[data-estilo="atrevido"] .xp-bc-h3 { text-transform: uppercase; letter-spacing: -.01em; }
.xp-bc__web[data-estilo="atrevido"] .xp-bc-ante { color: var(--tenue); letter-spacing: .2em; }
.xp-bc__web[data-estilo="atrevido"] .xp-bc-btn { border-radius: 0; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; box-shadow: 4px 4px 0 var(--dura); }
.xp-bc__web[data-estilo="atrevido"] .xp-bc-btn--sec { border-color: #FFFFFF; color: #FFFFFF; box-shadow: none; }
.xp-bc__web[data-estilo="atrevido"] .xp-bc-enlace { color: #FFFFFF; }
.xp-bc__web[data-estilo="atrevido"] .xp-bc-s--cabecera { border-bottom-color: var(--linea); }
.xp-bc__web[data-estilo="atrevido"] .xp-bc-logo { gap: 0; }
.xp-bc-logo__punto { color: var(--bc2); }
.xp-bc__web[data-estilo="atrevido"] .xp-bc-s--cabecera .xp-bc-btn { min-height: 38px; padding: .45rem .9rem; font-size: .75rem; box-shadow: 3px 3px 0 var(--dura); }
.xp-bc__web[data-estilo="atrevido"] .xp-bc-menu { font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.xp-bc__web[data-estilo="atrevido"] .xp-bc-alumnos { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }
/* Primera pantalla: titular gigante con la última parte resaltada */
.xp-bc__web[data-estilo="atrevido"] .xp-bc-s--hero { padding-top: 3rem; padding-bottom: 3.4rem; }
.xp-bc__web[data-estilo="atrevido"] .xp-bc-s--hero .xp-bc-s__in { display: block; }
.xp-bc__web[data-estilo="atrevido"] .xp-bc-s--hero .xp-bc-h1 { max-width: none; font-size: clamp(2.4rem, 8.6cqi, 5.4rem); line-height: .92; letter-spacing: -.045em; }
.xp-bc__web[data-estilo="atrevido"] .xp-bc-h1 mark { padding: 0 .12em; background: var(--bc2); color: var(--bctb); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.xp-bc-hero__fila { display: grid; grid-template-columns: 1fr .8fr; align-items: end; gap: 2rem; margin-top: 1.8rem; }
.xp-bc__web[data-estilo="atrevido"] .xp-bc-hero__media { position: relative; }
.xp-bc__web[data-estilo="atrevido"] .xp-bc-img { background: linear-gradient(135deg, color-mix(in srgb, var(--bc2) 70%, #000000), #1C1C22 70%); }
.xp-bc__web[data-estilo="atrevido"] .xp-bc-img--hero { aspect-ratio: 4 / 3; border: 3px solid #FFFFFF; box-shadow: 10px 10px 0 var(--bc2); }
.xp-bc-pegatina { position: absolute; top: -1.6rem; right: -.6rem; display: grid; place-items: center; width: 5.4rem; aspect-ratio: 1; border-radius: 50%; background: #FFFFFF; font: 800 .78rem/1.15 var(--tit); color: #0D0D10; text-align: center; text-transform: uppercase; transform: rotate(-12deg); }
/* Confianza: cinta que se mueve */
.xp-bc__web[data-estilo="atrevido"] .xp-bc-s--confianza { padding: 0; }
.xp-bc-cinta { overflow: hidden; padding: .85rem 0; background: var(--bc2); }
.xp-bc-cinta p { display: flex; gap: 2.4rem; width: max-content; animation: xp-bc-cinta 22s linear infinite; }
.xp-bc-cinta span { font: 800 .9rem var(--tit); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; color: var(--bctb); }
@keyframes xp-bc-cinta { to { transform: translateX(-33.333%); } }
.xp-bc__web[data-estilo="atrevido"] .xp-bc-s--confianza .xp-bc-pin { top: .3rem; }
/* Servicios: cajas con número gigante */
.xp-bc-cajas { display: grid; grid-template-columns: repeat(3, 1fr); border: 2px solid #FFFFFF; }
.xp-bc-caja { position: relative; min-height: 13rem; padding: 1.4rem 1.3rem 2.8rem; border-left: 2px solid #FFFFFF; }
.xp-bc-caja:first-child { border-left: 0; }
.xp-bc-caja__n { display: block; font: 800 3.2rem/1 var(--tit); letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.5px var(--bc2); }
.xp-bc-caja .xp-bc-h3 { margin-top: 1rem !important; font-size: 1.15rem; }
.xp-bc-caja p:not([class]) { font-size: .875rem; }
.xp-bc-caja__flecha { position: absolute; right: 1.2rem; bottom: 1rem; font: 800 1.4rem var(--tit); color: var(--bc2); }
.xp-bc__web[data-estilo="atrevido"] :is(.xp-bc-s--servicios, .xp-bc-s--opiniones, .xp-bc-s--galeria, .xp-bc-s--proceso, .xp-bc-s--tienda, .xp-bc-s--academia, .xp-bc-s--faq, .xp-bc-s--equipo) :is(.xp-bc-h2, .xp-bc-ante) { text-align: left; }
/* Tarjetas y opiniones: borde grueso y sombra dura */
.xp-bc__web[data-estilo="atrevido"] .xp-bc-tarjeta { padding: .9rem; border: 2px solid #FFFFFF; background: var(--suave); }
.xp-bc__web[data-estilo="atrevido"] .xp-bc-opinion { box-shadow: 6px 6px 0 var(--bc2); }
.xp-bc__web[data-estilo="atrevido"] .xp-bc-opinion .xp-bc-cita { margin: .6rem 0 !important; font: 700 1.05rem/1.4 var(--tit); color: #FFFFFF; }
.xp-bc__web[data-estilo="atrevido"] .xp-bc-opinion .xp-bc-quien { font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--bc2); }
.xp-bc__web[data-estilo="atrevido"] .xp-bc-img--retrato { border-radius: 0; border: 3px solid #FFFFFF; box-shadow: 8px 8px 0 var(--bc2); }
.xp-bc__web[data-estilo="atrevido"] .xp-bc-checks li { color: #FFFFFF; }
.xp-bc__web[data-estilo="atrevido"] .xp-bc-nivel { border-radius: 0; background: var(--bc2); color: var(--bctb); }
.xp-bc__web[data-estilo="atrevido"] .xp-bc-equipo { max-width: none; text-align: left; }
.xp-bc__web[data-estilo="atrevido"] .xp-bc-s--equipo .xp-bc-botones { justify-content: flex-start; }
.xp-bc__web[data-estilo="atrevido"] .xp-bc-medios { opacity: .75; }
.xp-bc__web[data-estilo="atrevido"] .xp-bc-medio { text-transform: uppercase; }
.xp-bc__web[data-estilo="atrevido"] .xp-bc-guia { border: 3px solid #FFFFFF; border-radius: 0; background: var(--bc2); box-shadow: 10px 10px 0 var(--dura); transform: rotate(-3deg); }
.xp-bc__web[data-estilo="atrevido"] .xp-bc-guia span { color: var(--bctb); text-transform: uppercase; }
.xp-bc__web[data-estilo="atrevido"] :is(.xp-bc-s--reserva, .xp-bc-s--presupuesto) .xp-bc-s__in { border: 2px solid #FFFFFF; background: var(--fondo); box-shadow: 8px 8px 0 var(--bc2); }
.xp-bc__web[data-estilo="atrevido"] .xp-bc-input { background: var(--suave); }
.xp-bc__web[data-estilo="atrevido"] .xp-bc-pasos li { text-align: left; }
.xp-bc__web[data-estilo="atrevido"] .xp-bc-pasos li::before { width: auto; height: auto; margin: 0 0 .3rem; border-radius: 0; background: none; font-size: 2.6rem; font-weight: 800; color: var(--bc2); }
.xp-bc__web[data-estilo="atrevido"] .xp-bc-logos span { background: #1F1F26; }
.xp-bc__web[data-estilo="atrevido"] .xp-bc-mapa {
background-color: #18181D;
background-image: linear-gradient(28deg, transparent 46%, #34343D 46% 50%, transparent 50%), linear-gradient(-62deg, transparent 58%, #34343D 58% 61%, transparent 61%),
repeating-linear-gradient(90deg, transparent 0 38px, #222228 38px 40px), repeating-linear-gradient(0deg, transparent 0 38px, #222228 38px 40px);
}
.xp-bc__web[data-estilo="atrevido"] .xp-bc-faq { max-width: none; margin-inline: 0 !important; border-top: 2px solid #FFFFFF; }
.xp-bc__web[data-estilo="atrevido"] .xp-bc-faq li { font-weight: 700; }
.xp-bc__web[data-estilo="atrevido"] .xp-bc-faq li span { font-weight: 800; }
/* Llamada final: todo el acento */
.xp-bc__web[data-estilo="atrevido"] .xp-bc-s--cta { background: var(--bc2); text-align: left; }
.xp-bc__web[data-estilo="atrevido"] .xp-bc-s--cta :is(.xp-bc-h2, p) { color: var(--bctb); }
.xp-bc__web[data-estilo="atrevido"] .xp-bc-s--cta .xp-bc-h2 { font-size: clamp(2rem, 7cqi, 4rem); }
.xp-bc__web[data-estilo="atrevido"] .xp-bc-s--cta .xp-bc-botones { justify-content: flex-start; }
.xp-bc__web[data-estilo="atrevido"] .xp-bc-s--cta .xp-bc-btn { border-color: #0D0D10; background: #0D0D10; color: #FFFFFF; box-shadow: 4px 4px 0 var(--dura); }
.xp-bc__web[data-estilo="atrevido"] .xp-bc-s--cta .xp-bc-btn--sec { background: transparent; color: var(--bctb); border-color: var(--bctb); box-shadow: none; }
.xp-bc__web[data-estilo="atrevido"] .xp-bc-s--pie { background: #000000; }
.xp-bc__web[data-estilo="atrevido"] .xp-bc-s--barra { background: #000000; box-shadow: none; border-top: 2px solid var(--bc2); }
/* ==========================================================================
Tienda online (tipo de web): aviso, cabecera con buscador y carrito, categorías, productos, garantías, promo,
newsletter y formas de pago. Y el antes y después de las obras (reformas).
========================================================================== */
.xp-bc__web[data-tipo] .xp-bc-s.xp-bc-s--aviso { padding: .5rem 2.4rem; border: 0; background: var(--bc1); text-align: center; } /* gana al relleno de cada estilo */
.xp-bc-s--aviso p { font-size: .75rem; font-weight: 600; letter-spacing: .02em; color: #FFFFFF; }
.xp-bc-s--aviso .xp-bc-pin { top: 2px; width: 24px; height: 24px; font-size: .6875rem; }
.xp-bc-buscador { display: inline-flex; align-items: center; gap: .45rem; min-width: 11rem; padding: .45rem .8rem; border: 1px solid var(--linea); border-radius: 999px; font-size: .8125rem; color: var(--tenue); white-space: nowrap; }
.xp-bc-buscador::before, .xp-bc-icono { content: ""; flex: none; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--icono) center / contain no-repeat; mask: var(--icono) center / contain no-repeat; }
.xp-bc-buscador::before, .xp-bc-icono--buscar { --icono: url("data:image/svg+xml;utf8,"); }
.xp-bc-icono { display: inline-block; width: 22px; height: 22px; color: var(--tit-color); }
.xp-bc-icono--cuenta { --icono: url("data:image/svg+xml;utf8,"); }
.xp-bc__web[data-tipo="tienda"] .xp-bc-s--cabecera .xp-bc-s__in { gap: 1.1rem; }
.xp-bc__web[data-tipo="tienda"] .xp-bc-menu { font-weight: 500; color: var(--texto); }
/* Categorías: cuatro puertas con foto */
.xp-bc-categorias { display: grid; grid-template-columns: repeat(4, 1fr); gap: .9rem; }
.xp-bc-cat { text-align: center; }
.xp-bc-cat .xp-bc-img { aspect-ratio: 4 / 5; }
.xp-bc-cat .xp-bc-h3 { margin-top: .6rem !important; font-size: 1rem; }
.xp-bc-s--categorias .xp-bc-h2, .xp-bc-s--destacados .xp-bc-h2, .xp-bc-s--newsletter :is(.xp-bc-h2, .xp-bc-ante) { text-align: center; }
/* Productos */
.xp-bc-tarjetas--4 { grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.xp-bc-producto { position: relative; display: flex; flex-direction: column; }
.xp-bc-producto .xp-bc-precio { margin-bottom: .7rem !important; }
.xp-bc-producto .xp-bc-h3 { margin-top: .7rem !important; font-size: .9375rem; }
.xp-bc-etiqueta { position: absolute; top: .6rem; left: .6rem; padding: .15rem .5rem; border-radius: 999px; background: var(--bc2); font-size: .6875rem; font-weight: 700; color: var(--bctb); }
.xp-bc-valoracion { font-size: .75rem; color: var(--tenue); }
.xp-bc-producto .xp-bc-btn { width: 100%; margin-top: auto !important; }
.xp-bc-ver-todo { margin-top: 1.2rem !important; text-align: center; }
/* Garantías: envío, devoluciones, pago y ayuda */
.xp-bc-s--ventajas { background: var(--suave); }
.xp-bc__web[data-tipo] .xp-bc-s.xp-bc-s--ventajas { padding-top: 1.6rem; padding-bottom: 1.6rem; }
.xp-bc-garantias { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem 1.4rem; }
.xp-bc-garantia { display: grid; grid-template-columns: 30px 1fr; column-gap: .65rem; align-items: start; font-size: .8125rem; color: var(--texto); }
.xp-bc-garantia::before { content: ""; grid-row: span 2; width: 28px; height: 28px; background: var(--tit-color); -webkit-mask: var(--icono) center / contain no-repeat; mask: var(--icono) center / contain no-repeat; }
.xp-bc-garantia strong { color: var(--tit-color); font-size: .875rem; }
.xp-bc-garantia--1 { --icono: url("data:image/svg+xml;utf8,"); }
.xp-bc-garantia--2 { --icono: url("data:image/svg+xml;utf8,"); }
.xp-bc-garantia--3 { --icono: url("data:image/svg+xml;utf8,"); }
.xp-bc-garantia--4 { --icono: url("data:image/svg+xml;utf8,"); }
/* Colección u oferta */
.xp-bc-s--promo .xp-bc-s__in { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 2.2rem; }
.xp-bc-img--promo { aspect-ratio: 16 / 11; }
/* Newsletter con descuento */
.xp-bc-s--newsletter { background: var(--suave); }
.xp-bc-s--newsletter .xp-bc-s__in { max-width: 36rem; margin-inline: auto; text-align: center; }
.xp-bc-s--newsletter .xp-bc-h2 { margin-top: .3rem !important; margin-bottom: .5rem !important; }
.xp-bc-pagos { display: flex; flex-wrap: wrap; gap: .4rem; margin: .7rem 0 0 !important; }
.xp-bc-pagos span { padding: .15rem .5rem; border: 1px solid rgba(255, 255, 255, .35); border-radius: 4px; font-size: .6875rem; font-weight: 600; }
/* Reformas: antes y después */
.xp-bc-obras { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.xp-bc-obra { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.xp-bc-obra .xp-bc-img { aspect-ratio: 1; border-radius: 0; }
.xp-bc-obra .xp-bc-img:first-child { border-radius: var(--r) 0 0 var(--r); filter: grayscale(1) brightness(.92); }
.xp-bc-obra .xp-bc-img:nth-child(2) { border-radius: 0 var(--r) var(--r) 0; }
.xp-bc-obra figcaption { grid-column: 1 / -1; margin-top: .4rem; font-size: .8125rem; font-weight: 600; color: var(--tit-color); }
/* Por estilos */
.xp-bc__web[data-estilo="cercano"] :is(.xp-bc-cat .xp-bc-img, .xp-bc-img--promo) { border-radius: var(--r); }
.xp-bc__web[data-estilo="cercano"] .xp-bc-cat .xp-bc-img { aspect-ratio: 1; border-radius: 50%; }
.xp-bc__web[data-estilo="cercano"] .xp-bc-s--ventajas { border-radius: 0; }
.xp-bc__web[data-estilo="elegante"] .xp-bc-cat .xp-bc-img { border-radius: var(--arco); }
.xp-bc__web[data-estilo="elegante"] .xp-bc-cat .xp-bc-h3 { font-style: italic; font-size: 1.15rem; }
.xp-bc__web[data-estilo="elegante"] .xp-bc-etiqueta { border-radius: 0; background: var(--fondo); color: var(--tit-color); font: italic 400 .8125rem var(--tit); }
.xp-bc__web[data-estilo="elegante"] .xp-bc-s--aviso p { font: italic 400 .875rem var(--tit); letter-spacing: 0; }
.xp-bc__web[data-estilo="elegante"] .xp-bc-s--ventajas { border-block: 1px solid var(--linea); background: transparent; }
.xp-bc__web[data-estilo="elegante"] .xp-bc-garantia strong { font: italic 400 1rem var(--tit); }
.xp-bc__web[data-estilo="elegante"] .xp-bc-img--promo { border-radius: var(--arco); aspect-ratio: 4 / 5; max-width: 300px; justify-self: center; }
.xp-bc__web[data-estilo="atrevido"] .xp-bc-s--aviso { background: var(--bc2); }
.xp-bc__web[data-estilo="atrevido"] .xp-bc-s--aviso p { color: var(--bctb); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.xp-bc__web[data-estilo="atrevido"] .xp-bc-cat .xp-bc-img { border: 2px solid #FFFFFF; }
.xp-bc__web[data-estilo="atrevido"] .xp-bc-cat .xp-bc-h3 { text-align: left; }
.xp-bc__web[data-estilo="atrevido"] .xp-bc-etiqueta { border-radius: 0; text-transform: uppercase; }
.xp-bc__web[data-estilo="atrevido"] .xp-bc-garantia strong { text-transform: uppercase; }
.xp-bc__web[data-estilo="atrevido"] .xp-bc-s--ventajas { border-block: 2px solid #FFFFFF; }
.xp-bc__web[data-estilo="atrevido"] .xp-bc-img--promo { border: 3px solid #FFFFFF; box-shadow: 10px 10px 0 var(--bc2); }
.xp-bc__web[data-estilo="atrevido"] .xp-bc-buscador { border-color: #3A3A44; }
.xp-bc__web[data-estilo="minimal"] .xp-bc-cat { text-align: left; }
.xp-bc__web[data-estilo="minimal"] :is(.xp-bc-s--categorias, .xp-bc-s--destacados) .xp-bc-h2 { text-align: left; }
.xp-bc__web[data-estilo="minimal"] .xp-bc-etiqueta { border-radius: 2px; background: var(--tit-color); color: #FFFFFF; font-weight: 500; }
.xp-bc__web[data-estilo="minimal"] .xp-bc-s--ventajas { background: transparent; }
.xp-bc__web[data-estilo="minimal"] .xp-bc-ver-todo { text-align: left; }
.xp-bc__web[data-estilo="minimal"] .xp-bc-pagos span { border-color: var(--linea); }
.xp-bc__web[data-estilo="elegante"] .xp-bc-pagos { justify-content: center; }
@container (max-width: 1000px) {
.xp-bc__web[data-tipo="tienda"]:not([data-estilo="minimal"]) .xp-bc-menu span:nth-child(n+4) { display: none; }
.xp-bc__web[data-tipo="tienda"] .xp-bc-buscador { min-width: 0; }
}
@container (max-width: 760px) {
.xp-bc-buscador { width: 34px; min-width: 0; height: 34px; padding: 0; justify-content: center; font-size: 0; }
}
@container (max-width: 620px) {
.xp-bc__web[data-tipo] .xp-bc-s.xp-bc-s--aviso { padding: .45rem 1.2rem; }
.xp-bc-categorias, .xp-bc-tarjetas--4 { grid-template-columns: repeat(2, 1fr); }
.xp-bc-garantias { grid-template-columns: 1fr 1fr; }
.xp-bc-s--promo .xp-bc-s__in, .xp-bc-obras { grid-template-columns: 1fr; }
.xp-bc-buscador { display: none; }
/* Los números del porqué, más pequeños: tapan menos */
.xp-bc-pin { top: .3rem; left: .3rem; width: 22px; height: 22px; font-size: .6875rem; border-width: 1.5px; }
}
.xp-bc-s--barra .xp-bc-pin { left: 50%; margin-left: -14px; }
/* ==========================================================================
Estrecho = móvil (consultas de contenedor)
========================================================================== */
@container (max-width: 620px) {
.xp-bc-s { padding: 2rem 1.2rem; }
.xp-bc-s--cabecera .xp-bc-menu, .xp-bc-s--cabecera .xp-bc-btn, .xp-bc-alumnos { display: none; }
.xp-bc-hamb { display: flex; }
.xp-bc-s--hero .xp-bc-s__in, .xp-bc-s--zona .xp-bc-s__in, .xp-bc-hero__fila, .xp-bc-s--suscripcion .xp-bc-s__in { grid-template-columns: 1fr; gap: 1.6rem; }
.xp-bc-tarjetas, .xp-bc-pasos, .xp-bc-cajas { grid-template-columns: 1fr; }
.xp-bc-equipo { grid-template-columns: repeat(3, 1fr); gap: .8rem; }
.xp-bc-persona .xp-bc-h3 { font-size: .875rem; }
.xp-bc-persona p:not([class]) { font-size: .75rem; }
.xp-bc-guia { width: 120px; }
.xp-bc-caja { min-height: 0; border-left: 0; border-top: 2px solid #FFFFFF; }
.xp-bc-caja:first-child { border-top: 0; }
.xp-bc-s--sobre .xp-bc-s__in { flex-direction: column; align-items: flex-start; }
.xp-bc-logos { grid-template-columns: repeat(3, 1fr); }
.xp-bc-checks { flex-direction: column; align-items: flex-start; }
.xp-bc-medios { gap: .6rem 1.4rem; }
.xp-bc-pasos li { text-align: left; }
.xp-bc-pasos li::before { margin-inline: 0; }
.xp-bc-sello { left: .6rem; bottom: .6rem; }
.xp-bc-filas li { grid-template-columns: 2.4rem 1fr; }
.xp-bc-filas .xp-bc-enlace { grid-column: 2; }
.xp-bc__web[data-estilo="elegante"] .xp-bc-s--cabecera .xp-bc-s__in { grid-template-columns: 1fr auto auto; gap: 1rem; }
.xp-bc__web[data-estilo="elegante"] .xp-bc-logo { justify-content: flex-start; font-size: 1.1rem; }
.xp-bc__web[data-estilo="elegante"] .xp-bc-s--cabecera .xp-bc-menu:first-of-type { display: none; }
.xp-bc__web[data-estilo="elegante"] .xp-bc-s--cabecera .xp-bc-menu:last-of-type:has(.xp-bc-carrito) { display: flex; }
.xp-bc__web[data-estilo="elegante"] .xp-bc-s--cabecera .xp-bc-menu:last-of-type span:not(.xp-bc-carrito, .xp-bc-icono) { display: none; }
.xp-bc__web[data-estilo="elegante"] .xp-bc-s--hero .xp-bc-s__in { grid-template-columns: 1fr; gap: 2.4rem; }
.xp-bc__web[data-estilo="elegante"] .xp-bc-hero__media { max-width: 250px; }
.xp-bc__web[data-estilo="elegante"] .xp-bc-s--sobre .xp-bc-s__in { gap: 1.6rem; }
.xp-bc__web[data-estilo="elegante"] .xp-bc-checks { flex-direction: row; justify-content: center; }
.xp-bc__web[data-estilo="elegante"] .xp-bc-checks li { padding: .3rem .8rem; border-left: 0; text-align: center; }
.xp-bc__web[data-estilo="atrevido"] .xp-bc-s--hero .xp-bc-h1 { font-size: clamp(2.2rem, 13cqi, 3.4rem); }
.xp-bc-pegatina { top: -1.2rem; right: .2rem; width: 4.6rem; }
/* Minimalista: sin menú escondido, los apartados en una fila que se desliza bajo el logo */
.xp-bc__web[data-estilo="minimal"] .xp-bc-s--cabecera .xp-bc-menu span { padding-bottom: .2rem; }
.xp-bc__web[data-estilo="minimal"] .xp-bc-hamb { display: none; }
.xp-bc__web[data-estilo="minimal"] :is(.xp-bc-s--servicios, .xp-bc-s--opiniones, .xp-bc-s--faq, .xp-bc-s--proceso, .xp-bc-s--tienda, .xp-bc-s--academia, .xp-bc-s--galeria) .xp-bc-s__in { display: block; }
.xp-bc__web[data-estilo="minimal"][data-tipo="personal"] .xp-bc-s--hero .xp-bc-s__in, .xp-bc-hero__pie { grid-template-columns: 1fr; }
.xp-bc__web[data-estilo="minimal"] .xp-bc-img--ancha { aspect-ratio: 4 / 3; }
.xp-bc__web[data-estilo="minimal"] .xp-bc-checks li { padding: 0; border-left: 0; }
}
@container (min-width: 621px) {
.xp-bc-s--barra { display: none; }
}
/* ---------- Los números y bocadillos del porqué ---------- */
.xp-bc-pin {
position: absolute; top: .55rem; left: .55rem; z-index: 3; display: grid; place-items: center; width: 28px; height: 28px; padding: 0;
border: 2px solid #FFFFFF; border-radius: 50%; background: var(--xp-rosa-boton); box-shadow: 0 3px 10px rgba(224, 23, 79, .45);
font: 700 .8125rem/1 var(--xp-f-ui); color: #FFFFFF; cursor: pointer; transition: transform .15s ease;
}
.xp-bc-pin:hover, .xp-bc-pin:focus-visible { transform: scale(1.12); }
/* El primer número late un par de veces al cargar: así se entiende que se puede pulsar */
.xp-bc-s--hero .xp-bc-pin { animation: xp-bc-late 1.4s ease-out .8s 3; }
@keyframes xp-bc-late { 0% { box-shadow: 0 0 0 0 rgba(224, 23, 79, .55); } 70% { box-shadow: 0 0 0 14px rgba(224, 23, 79, 0); } 100% { box-shadow: 0 3px 10px rgba(224, 23, 79, .45); } }
.xp-bc-pin:focus-visible { outline: 3px solid var(--xp-ciruela); outline-offset: 2px; }
.xp-bc-s.is-activo .xp-bc-pin { background: var(--xp-ciruela); box-shadow: none; }
.xp-bc-burbuja {
position: absolute; top: 2.6rem; left: .55rem; z-index: 4; width: min(330px, calc(100% - 1.1rem)); padding: .85rem 2.3rem .9rem 1rem;
border-radius: 12px; background: var(--xp-ciruela-oscuro); box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .45);
font: .875rem/1.5 var(--xp-f-ui); letter-spacing: 0; color: #E9E1EE; text-align: left; text-transform: none; animation: xp-bc-sale .2s ease both;
}
.xp-bc-burbuja strong { display: block; margin-bottom: .2rem; color: #FFFFFF; }
.xp-bc-burbuja__x { position: absolute; top: .35rem; right: .35rem; width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #FFFFFF; font-size: 1.2rem; line-height: 1; cursor: pointer; }
.xp-bc-s--barra .xp-bc-burbuja { top: auto; bottom: calc(100% + .6rem); }
@keyframes xp-bc-sale { from { opacity: 0; transform: translateY(-4px); } }
/* ---------- Lista del porqué ---------- */
.xp-bc__porque h2 { margin: 0 0 1rem; font-size: clamp(1.4rem, 1.15rem + 1vw, 1.875rem); }
.xp-bc__lista { margin: 0; padding: 0; list-style: none; columns: 2 22rem; column-gap: 2rem; }
.xp-bc__lista li { break-inside: avoid; margin-bottom: .35rem; }
.xp-bc__lista button { display: flex; align-items: flex-start; gap: .75rem; width: 100%; padding: .6rem .7rem; border: 0; border-radius: 12px; background: transparent; text-align: left; font: .9375rem/1.5 var(--xp-f-ui); color: var(--xp-texto); cursor: pointer; }
.xp-bc__lista button:hover, .xp-bc__lista li.is-activo button { background: var(--xp-blanco); }
.xp-bc__lista button:focus-visible { outline: 3px solid var(--xp-rosa-boton); outline-offset: 1px; }
.xp-bc__lista strong { color: var(--xp-ciruela); }
.xp-bc__n { display: grid; place-items: center; flex: none; width: 1.6rem; height: 1.6rem; margin-top: .05rem; border-radius: 50%; background: var(--xp-rosa-boton); font: 700 .75rem/1 var(--xp-f-ui); color: #FFFFFF; }
/* ---------- Te lo mando por correo ---------- */
.xp-bc__enviar { display: grid; gap: 1.5rem 2.5rem; padding: clamp(1.4rem, 1rem + 2vw, 2.5rem); border-radius: var(--xp-radio-g); background: var(--xp-blanco); box-shadow: var(--xp-sombra); scroll-margin-top: 5rem; }
@media (min-width: 900px) { .xp-bc__enviar { grid-template-columns: 1fr 1.25fr; align-items: start; } }
.xp-bc__enviar h2 { margin: 0 0 .6rem; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.xp-bc__enviar-texto p { margin: 0; color: var(--xp-texto); }
.xp-bc__form { display: grid; gap: 1rem; }
.xp-bc__form[hidden], .xp-bc__hecho[hidden], .xp-bc__cuentame[hidden] { display: none; }
.xp-bc__cuentame { display: grid; gap: 1rem; padding: 1rem; border-radius: 14px; background: var(--xp-lila); }
.xp-bc__fila { display: grid; gap: 1rem; }
@media (min-width: 600px) { .xp-bc__fila { grid-template-columns: 1fr 1fr; } }
.xp-bc__check { display: flex; align-items: flex-start; gap: .65rem; font-size: .9375rem; line-height: 1.45; color: var(--xp-texto); cursor: pointer; }
.xp-bc__check input { flex: none; width: 1.25rem; height: 1.25rem; margin: .1rem 0 0; accent-color: var(--xp-rosa-boton); }
.xp-bc__check a { color: var(--xp-ciruela); }
.xp-bc__form [aria-invalid="true"] { border-color: var(--xp-rosa-tinta); }
.xp-bc__trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.xp-bc__form .wp-block-button__link { width: 100%; min-height: 54px; }
.xp-bc__error { margin: 0; color: var(--xp-rosa-tinta); font-size: .9375rem; }
.xp-bc__error:empty { display: none; }
.xp-bc__nota { margin: 0; text-align: center; font-family: var(--xp-f-ui); font-size: .8125rem; color: var(--xp-gris); }
.xp-bc__hecho-texto { margin: 0; padding: 1rem 1.1rem; border-radius: 12px; background: #E2F3EA; color: #145C38; line-height: 1.5; }
/* ---------- Móvil (la página) ---------- */
@media (max-width: 781px) {
.xp-bc__panel { gap: 1.2rem; }
/* Sectores en una fila que se desliza; los estilos, en tarjetas que se deslizan: el boceto aparece antes */
.xp-bc__grupo .xp-bc__fichas, .xp-bc__estilos { flex-wrap: nowrap; overflow-x: auto; margin-inline: -1.1rem; padding: 0 1.1rem .35rem; scrollbar-width: none; scroll-snap-type: x proximity; }
/* Lo que se puede marcar a la vez se ve entero */
.xp-bc__grupo .xp-bc__fichas--varias, .xp-bc__grupo:last-of-type .xp-bc__fichas { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding: 0; }
.xp-bc__grupo .xp-bc__fichas::-webkit-scrollbar, .xp-bc__estilos::-webkit-scrollbar { display: none; }
.xp-bc__ficha { flex: none; scroll-snap-align: start; }
.xp-bc__estilos { display: flex; gap: .55rem; }
.xp-bc__estilo { flex: 0 0 15.5rem; scroll-snap-align: start; }
.xp-bc__pantalla { height: min(72vh, 640px); }
.xp-bc__vistas { display: none; }
.xp-bc__marco[data-vista="movil"] { max-width: none; border: 1px solid var(--xp-linea); border-radius: 14px; }
.xp-bc__lista { columns: 1; }
.xp-bc__medida { padding: .9rem 1rem .9rem 3rem; font-size: .9375rem; }
.xp-bc__medida::before { left: .9rem; top: .95rem; width: 1.3rem; height: 1.3rem; }
}
@media (prefers-reduced-motion: reduce) {
.xp-bc__marco, .xp-bc-pin, .xp-bc-s { transition: none; }
.xp-bc-burbuja, .xp-bc-s--hero .xp-bc-pin, .xp-bc-cinta p { animation: none; }
}