/* TEMA 2026: base visual común de todas las páginas (se carga después de Bootstrap y estilo.css) */

:root {
	--rojo: #BA0000;
	--rojo-oscuro: #990000;
	--rojo-logo: #DA0000;
	--granate: #7A141C;
	--rosa-50: #FFF5F5;
	--rosa-100: #FCE8E8;
	--rosa-200: #F3C9C9;
	--tinta: #1F1F1F;
	--tinta-suave: #333333;
	--texto: #444444;
	--texto-suave: #5F5F5F;
	--linea: #ECECEC;
	--gris-fondo: #F6F6F7;
	--sombra-tarjeta: 0 12px 32px rgba(20, 6, 8, .08);
	--sombra-alta: 0 24px 60px rgba(20, 6, 8, .14);
	--radio: 16px;
	--fuente-titulos: 'Titillium Web', system-ui, sans-serif;

	/* Bootstrap */
	--bs-primary: #BA0000;
	--bs-primary-rgb: 186, 0, 0;
	--bs-link-color: #BA0000;
	--bs-link-color-rgb: 186, 0, 0;
	--bs-link-hover-color: #990000;
	--bs-link-hover-color-rgb: 153, 0, 0;
	--bs-body-color: #444444;
	--bs-heading-color: #1F1F1F;
	--bs-border-radius: .625rem;
	--bs-border-radius-lg: .875rem;
	--bs-focus-ring-color: rgba(186, 0, 0, .25);
}

a { text-decoration: none }
a:hover { text-decoration: underline }
a.btn:hover, a.tarjeta:hover, a.galeria-web:hover, .menu a:hover, .pie-web a:hover { text-decoration: none }
body { color: var(--texto); font-size: 1.0625rem; line-height: 1.6; -webkit-font-smoothing: antialiased }
h1, h2, h3, h4, h5, h6 { font-family: var(--fuente-titulos); color: var(--tinta); font-weight: 700; text-wrap: balance }
h3, h4 { font-weight: 700; color: var(--tinta) }
h5 { color: var(--tinta); margin-bottom: .5rem }
p { text-wrap: pretty }
::selection { background: var(--rosa-200); color: var(--tinta) }
:focus-visible { outline: 3px solid rgba(186, 0, 0, .45); outline-offset: 2px }

/* Botones */
.btn { border-radius: 12px; font-weight: 600; padding: .65rem 1.3rem; transition: transform .15s, box-shadow .15s, background-color .15s, border-color .15s }
.btn-lg { padding: .85rem 1.6rem; font-size: 1.05rem }
.btn i { margin-right: 6px }
.btn-primary { --bs-btn-bg: var(--rojo); --bs-btn-border-color: var(--rojo); --bs-btn-hover-bg: var(--rojo-oscuro); --bs-btn-hover-border-color: var(--rojo-oscuro); --bs-btn-active-bg: var(--granate); --bs-btn-active-border-color: var(--granate); --bs-btn-disabled-bg: var(--rojo); --bs-btn-disabled-border-color: var(--rojo); box-shadow: 0 8px 20px rgba(186, 0, 0, .22) }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(186, 0, 0, .3) }
.btn-outline-primary { --bs-btn-color: var(--rojo); --bs-btn-border-color: var(--rojo); --bs-btn-hover-bg: var(--rojo); --bs-btn-hover-border-color: var(--rojo); --bs-btn-active-bg: var(--rojo-oscuro); --bs-btn-active-border-color: var(--rojo-oscuro) }
.btn-secondary, .btn-dark { --bs-btn-bg: var(--tinta); --bs-btn-border-color: var(--tinta); --bs-btn-hover-bg: #000; --bs-btn-hover-border-color: #000 }
.btn-light, .btn-blanco { background: #FFF; color: var(--tinta-suave); border: 2px solid #E2E2E2 }
.btn-light:hover, .btn-blanco:hover { border-color: #999; color: #000; background: #FFF }
.btn-whatsapp { background: #25D366; border-color: #25D366; color: #0B3B1E }
.btn-whatsapp:hover { background: #1DA851; border-color: #1DA851; color: #FFF }

/* Cabecera de página (hero) */
.hero { position: relative; overflow: hidden; background: radial-gradient(circle at 85% 10%, var(--rosa-100) 0, rgba(252, 232, 232, 0) 45%), linear-gradient(180deg, var(--rosa-50) 0%, #FFF 100%); padding: 64px 0 72px; border-bottom: 1px solid #F3E4E4 }
.hero h1, .hero-titulo { font-size: clamp(2.1rem, 4.4vw, 3.4rem); line-height: 1.08; letter-spacing: -.01em; margin-bottom: 18px }
.hero h1 em, .hero-titulo em, .seccion-titulo em { font-style: normal; color: var(--rojo) }
.hero-img { width: 100%; border-radius: 20px; box-shadow: var(--sombra-alta); object-fit: cover; aspect-ratio: 3 / 2 }
.hero-img.ilustracion { box-shadow: none; border-radius: 0; aspect-ratio: auto }
.hero-img.libre { aspect-ratio: auto }
.hero-centrado { text-align: center }
.hero-centrado .entradilla { margin-left: auto; margin-right: auto }
.hero-centrado .botonera { justify-content: center }
.etiqueta { display: inline-flex; align-items: center; gap: 6px; background: var(--rosa-100); color: var(--rojo-oscuro); border-radius: 50px; padding: 5px 14px; font-size: .88rem; font-weight: 600; margin-bottom: 16px }
.entradilla { font-size: 1.2rem; color: var(--texto-suave); max-width: 620px; margin-bottom: 28px }
.botonera { display: flex; flex-wrap: wrap; gap: 12px }
.hero-datos { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 26px; padding: 0; list-style: none; color: var(--texto-suave); font-size: .95rem }
.hero-datos i { color: var(--rojo); margin-right: 6px }

/* Secciones */
.seccion { padding: 80px 0 }
.seccion-compacta { padding: 56px 0 }
.seccion-cabecera { max-width: 760px; margin: 0 auto 44px; text-align: center }
.seccion-cabecera.izquierda { margin-left: 0; text-align: left }
.seccion-titulo { font-size: clamp(1.75rem, 3vw, 2.4rem); line-height: 1.15; margin-bottom: 14px }
.seccion-sub { font-size: 1.1rem; color: var(--texto-suave); margin: 0 }
.antetitulo { display: block; font-family: var(--fuente-titulos); font-size: .85rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--rojo); margin-bottom: 8px }
.banda-suave { background: var(--rosa-50) }
.banda-gris { background: var(--gris-fondo) }
.banda-oscura { background: radial-gradient(circle at 15% 0%, #9B1B25 0, rgba(155, 27, 37, 0) 55%), var(--granate); color: rgba(255, 255, 255, .88) }
.banda-oscura h2, .banda-oscura h3, .banda-oscura h4, .banda-oscura h5 { color: #FFF }
.banda-oscura .antetitulo { color: #FFC9C9 }
.banda-oscura .seccion-sub { color: rgba(255, 255, 255, .8) }

/* Tarjetas */
.tarjeta { display: flex; flex-direction: column; height: 100%; padding: 28px; background: #FFF; border: 1px solid var(--linea); border-radius: var(--radio); color: var(--texto); transition: transform .2s, box-shadow .2s, border-color .2s }
a.tarjeta:hover, .tarjeta.elevable:hover { transform: translateY(-4px); box-shadow: var(--sombra-tarjeta); border-color: var(--rosa-200); color: var(--texto); text-decoration: none }
.tarjeta h3 { font-size: 1.25rem; margin-bottom: 8px }
.tarjeta p { font-size: .98rem; margin-bottom: 0 }
.tarjeta p + p { margin-top: 8px }
.tarjeta-icono { flex-shrink: 0; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: var(--rosa-100); color: var(--rojo); font-size: 24px; margin-bottom: 18px }
.tarjeta-enlace { margin-top: auto; padding-top: 16px; color: var(--rojo); font-weight: 600; font-size: .95rem }
.tarjeta-enlace i { margin-left: 4px; transition: transform .15s }
a.tarjeta:hover .tarjeta-enlace i { transform: translateX(3px) }
.tarjeta-foto { padding: 0; overflow: hidden }
.tarjeta-foto img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block }
.tarjeta-foto.contener img { object-fit: contain; padding: 16px; background: #FFF }
.mapa { width: 100%; min-height: 320px; border: 0; border-radius: var(--radio); box-shadow: var(--sombra-tarjeta) }
.tarjeta-foto .tarjeta-cuerpo { padding: 22px 24px 24px; display: flex; flex-direction: column; flex-grow: 1 }
.banda-oscura .tarjeta { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .85) }
.banda-oscura .tarjeta-icono { background: rgba(255, 255, 255, .12); color: #FFF }

/* Ventajas: icono a la izquierda y texto */
.ventaja { display: flex; gap: 16px; align-items: flex-start }
.ventaja .tarjeta-icono { margin-bottom: 0; width: 48px; height: 48px; font-size: 20px; border-radius: 12px }
.ventaja h3, .ventaja h4 { font-size: 1.1rem; margin-bottom: 4px }
.ventaja p { margin: 0; font-size: .97rem }

/* Lista con marcas */
.lista-check { list-style: none; padding: 0; margin: 0 }
.lista-check li { position: relative; padding: 0 0 10px 30px }
.lista-check li::before { content: "\f00c"; font-family: "Font Awesome 5 Pro"; font-weight: 900; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; background: var(--rosa-100); color: var(--rojo); font-size: 11px; display: flex; align-items: center; justify-content: center }
.lista-check small { display: block; color: var(--texto-suave) }

/* Tarifas */
.tarifa { position: relative; display: flex; flex-direction: column; height: 100%; padding: 32px 28px; background: #FFF; border: 1px solid var(--linea); border-radius: 20px }
.tarifa.destacada { border: 2px solid var(--rojo); box-shadow: var(--sombra-alta) }
.tarifa-insignia { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--rojo); color: #FFF; border-radius: 50px; padding: 4px 14px; font-size: .8rem; font-weight: 700; white-space: nowrap }
.tarifa h3 { font-size: 1.4rem; margin-bottom: 6px }
.tarifa-desc { color: var(--texto-suave); font-size: .95rem; min-height: 3em }
.tarifa-precio { font-family: var(--fuente-titulos); font-size: 2.8rem; font-weight: 700; color: var(--tinta); line-height: 1; margin: 18px 0 6px }
.tarifa-precio small { font-size: 1rem; font-weight: 400; color: var(--texto-suave) }
.tarifa-nota { font-size: .85rem; color: var(--texto-suave); margin-bottom: 20px }
.tarifa .lista-check { margin: 8px 0 24px; flex-grow: 1 }
.tarifa .btn { width: 100% }

/* Cifras */
.cifra { font-family: var(--fuente-titulos); font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 700; line-height: 1; color: inherit }
.cifra-texto { display: block; margin-top: 6px; font-size: .95rem; opacity: .85 }

/* Pasos numerados (solo para secuencias reales) */
.pasos { counter-reset: paso; list-style: none; padding: 0; margin: 0 }
.paso { counter-increment: paso; position: relative; padding-left: 64px }
.paso::before { content: counter(paso); position: absolute; left: 0; top: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--rojo); color: #FFF; font-family: var(--fuente-titulos); font-weight: 700; font-size: 1.2rem; display: flex; align-items: center; justify-content: center }
.paso h3 { font-size: 1.15rem; margin-bottom: 4px }

/* Imágenes */
.img-redonda { border-radius: var(--radio); box-shadow: var(--sombra-tarjeta) }
.galeria-web { display: block; border-radius: 14px; overflow: hidden; border: 1px solid var(--linea); background: #FFF; color: var(--texto); transition: transform .2s, box-shadow .2s }
.galeria-web:hover { transform: translateY(-4px); box-shadow: var(--sombra-tarjeta); text-decoration: none; color: var(--texto) }
.galeria-web img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top }
.galeria-web span { display: block; padding: 12px 16px; font-weight: 600; font-size: .95rem }

/* Avisos */
.aviso { display: flex; gap: 14px; padding: 18px 20px; border-radius: 14px; background: #FFF8E6; border: 1px solid #F5DFA6; color: #5A4300 }
.aviso i { color: #B07D00; margin-top: 4px }
.aviso strong { color: #3D2E00 }
.aviso-info { background: var(--rosa-50); border-color: var(--rosa-200); color: var(--texto) }
.aviso-info i { color: var(--rojo) }

/* Preguntas frecuentes */
.faq-lista { border-top: 1px solid var(--linea) }
.faq-lista .accordion-item { border: 0; border-bottom: 1px solid var(--linea); background: transparent }
.faq-lista .accordion-button { font-family: var(--fuente-titulos); font-weight: 700; font-size: 1.08rem; color: var(--tinta); background: transparent; padding: 20px 4px; box-shadow: none }
.faq-lista .accordion-button:not(.collapsed) { color: var(--rojo) }
.faq-lista .accordion-button:focus-visible { outline: 3px solid rgba(186, 0, 0, .35) }
.faq-lista .accordion-body { padding: 0 4px 20px; color: var(--texto) }

/* Llamada final */
.cta-final { position: relative; overflow: hidden; border-radius: 24px; padding: 56px 40px; text-align: center; color: rgba(255, 255, 255, .9); background: radial-gradient(circle at 90% 0%, #C0262F 0, rgba(192, 38, 47, 0) 50%), radial-gradient(circle at 0% 100%, #4A0B10 0, rgba(74, 11, 16, 0) 55%), var(--granate) }
.cta-final h2 { color: #FFF; font-size: clamp(1.7rem, 3vw, 2.3rem); margin-bottom: 10px }
.cta-final p { font-size: 1.1rem; margin: 0 auto 26px; max-width: 620px }
.cta-final .botonera { justify-content: center }
.cta-final .btn-light { border-color: #FFF }
.cta-final .btn-outline-light { border-width: 2px }
.cta-final-datos { margin-top: 18px; font-size: .95rem; color: rgba(255, 255, 255, .75) }
.cta-final-datos a { color: #FFF; font-weight: 600 }

/* Formularios */
.form-control, .form-select { border-radius: 12px; padding: .7rem 1rem; border-color: #DDD }
.form-control:focus, .form-select:focus { border-color: var(--rojo); box-shadow: 0 0 0 .25rem rgba(186, 0, 0, .15) }
.form-label { font-weight: 600; color: var(--tinta-suave) }
.form-check-input:checked { background-color: var(--rojo); border-color: var(--rojo) }

/* Textos legales y páginas de solo texto */
.texto-largo { max-width: 820px; margin: 0 auto }
.texto-largo h2 { font-size: 1.5rem; margin: 2rem 0 .75rem }
.texto-largo h3 { font-size: 1.2rem; margin: 1.5rem 0 .5rem }

/* Aparición suave al hacer scroll (solo si hay JS y no se pide movimiento reducido) */
@media (prefers-reduced-motion: no-preference) {
	.js-revelar .revelar { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease }
	.js-revelar .revelar.visible { opacity: 1; transform: none }
}

/* Pie de página */
.pie-web { background: #151515; color: rgba(255, 255, 255, .7); padding: 64px 0 28px; margin-top: 80px; font-size: .97rem }
.pie-web a { color: rgba(255, 255, 255, .78) }
.pie-web a:hover { color: #FFF; text-decoration: none }
.pie-web h2 { font-size: 1rem; color: #FFF; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 16px }
.pie-web ul { list-style: none; padding: 0; margin: 0 }
.pie-web li { padding: 4px 0 }
.pie-marca p { margin: 14px 0 20px; max-width: 320px }
.pie-logo { font-family: var(--fuente-titulos); font-size: 1.9rem; font-weight: 700; color: #FFF; letter-spacing: -.01em }
.pie-logo span { color: #FF4B4B }
.pie-contacto { display: flex; flex-direction: column; gap: 10px }
.pie-contacto i { width: 20px; color: #FF6B6B }
.pie-telefono { font-family: var(--fuente-titulos); font-size: 1.5rem; font-weight: 700; color: #FFF !important }
.pie-redes { display: flex; gap: 10px; margin-top: 18px }
.pie-redes a { width: 42px; height: 42px; border-radius: 12px; background: rgba(255, 255, 255, .08); display: flex; align-items: center; justify-content: center; font-size: 18px; transition: background .15s }
.pie-redes a:hover { background: var(--rojo) }
.pie-inferior { margin-top: 48px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .1); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: .88rem; color: rgba(255, 255, 255, .55) }
.pie-inferior nav { display: flex; flex-wrap: wrap; gap: 18px }

@media (max-width: 767.98px) {
	.hero { padding: 40px 0 48px }
	.seccion { padding: 56px 0 }
	.seccion-cabecera { margin-bottom: 32px }
	.cta-final { padding: 40px 22px; border-radius: 18px }
	.pie-web { margin-top: 56px }
}