/*
Theme Name: Cantabria
Theme URI: https://ccdseguros.cl
Author: Cantabria Corredores de Seguros SpA
Description: Tema de bloques a medida para Seguros Cantabria. Diseño propio, sin constructores externos, con los colores corporativos y las secciones editables desde el editor de WordPress.
Version: 1.0.0
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cantabria
Tags: block-theme, full-site-editing, one-column, custom-colors, custom-menu, accessibility-ready
*/

/* =========================================================================
   Variables de apoyo. Los colores vienen de theme.json; aquí sólo se
   definen los valores que el editor de bloques no expone (sombras finas,
   transiciones, radios) para no repetirlos en cada regla.
   ========================================================================= */
:root {
	--ccd-radio: 18px;
	--ccd-radio-sm: 12px;
	--ccd-trans: .25s cubic-bezier(.4, 0, .2, 1);
	--ccd-sombra: 0 2px 4px rgba(46, 58, 66, .04), 0 12px 32px rgba(46, 58, 66, .08);
	--ccd-sombra-alta: 0 4px 8px rgba(46, 58, 66, .06), 0 24px 56px rgba(46, 58, 66, .14);
}

body {
	-webkit-font-smoothing: antialiased;
}

/* =========================================================================
   Navegación por anclas
   El sitio funciona como landing: los enlaces del menú bajan a las secciones
   de la portada. La cabecera es fija, así que cada destino reserva su altura
   para no quedar oculto bajo ella al saltar.
   ========================================================================= */
html {
	scroll-behavior: smooth;
}
:target,
#seguros,
#nosotros,
#preguntas,
#contacto,
#cotizar,
#cotizador,
.ccd-formulario {
	scroll-margin-top: 104px;
}

/* Datos de contacto de la sección final. */
.ccd-datos {
	list-style: none;
	padding: 0;
	margin: 2rem 0 0;
}
.ccd-datos li {
	display: flex;
	gap: .9rem;
	align-items: flex-start;
	margin-bottom: 1.2rem;
}
.ccd-datos svg {
	width: 19px;
	height: 19px;
	stroke: var(--wp--preset--color--verde-oscuro);
	fill: none;
	stroke-width: 1.9;
	flex-shrink: 0;
	margin-top: .35rem;
}
.ccd-datos strong {
	display: block;
	color: var(--wp--preset--color--gris-900);
	font-size: 1rem;
}
.ccd-datos a {
	text-decoration: none;
}
.ccd-datos a:hover strong {
	color: var(--wp--preset--color--verde-oscuro);
}
.ccd-datos small {
	font-size: .9rem;
	color: var(--wp--preset--color--gris-500);
}

/* Quien pidió menos animación en su sistema salta sin desplazamiento. */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* Salto al contenido, para teclado y lectores de pantalla. */
.saltar-al-contenido {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	background: var(--wp--preset--color--verde-profundo);
	color: #fff;
	padding: .9rem 1.5rem;
	border-radius: 0 0 8px 0;
	font-weight: 650;
}
.saltar-al-contenido:focus {
	left: 0;
}

/* =========================================================================
   Cabecera
   ========================================================================= */
/* La cabecera se fija en el <header> que genera la parte de plantilla, no en
   el grupo interior: ese contenedor mide lo mismo que la barra, así que un
   sticky puesto ahí dentro no tiene recorrido y se va con el scroll. */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 60;
}

.ccd-cabecera {
	background: rgba(255, 255, 255, .92);
	backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid var(--wp--preset--color--gris-300);
}
.ccd-cabecera .wp-block-site-logo img {
	height: 46px;
	width: auto;
}
.ccd-cabecera .wp-block-navigation {
	font-size: .97rem;
	font-weight: 550;
}
.ccd-cabecera .wp-block-navigation a {
	padding: .55rem .95rem;
	border-radius: 100px;
	color: var(--wp--preset--color--gris-700);
	transition: var(--ccd-trans);
}
.ccd-cabecera .wp-block-navigation a:hover {
	background: var(--wp--preset--color--verde-claro);
	color: var(--wp--preset--color--verde-profundo);
	text-decoration: none;
}
.ccd-cabecera .wp-block-navigation .current-menu-item a {
	color: var(--wp--preset--color--verde-profundo);
	font-weight: 650;
}
.ccd-cabecera .wp-block-button__link {
	padding: .7rem 1.4rem;
	font-size: .95rem;
}

/* =========================================================================
   Portada
   ========================================================================= */
.ccd-portada {
	position: relative;
	overflow: hidden;
	color: #fff;
	/* La foto se define en la propia página; el degradado es el respaldo. */
	background: linear-gradient(115deg, #243039 0%, #31502A 58%, #4E7538 100%);
}
.ccd-portada::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--ccd-portada-foto, none) center 45% / cover no-repeat;
	opacity: .17;
	mix-blend-mode: luminosity;
}
.ccd-portada::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(20, 30, 24, .55) 0%, rgba(20, 30, 24, .22) 45%, transparent 70%);
}
.ccd-portada > .wp-block-group__inner-container,
.ccd-portada > * {
	position: relative;
	z-index: 2;
}
.ccd-portada :is(h1, h2, h3) {
	color: #fff;
}
.ccd-portada .ccd-resalte {
	color: #B8DFA0;
}
.ccd-portada p {
	color: rgba(255, 255, 255, .9);
}

/* Etiqueta redonda */
.ccd-etiqueta {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--wp--preset--color--verde-oscuro);
	background: var(--wp--preset--color--verde-claro);
	border: 1px solid var(--wp--preset--color--verde-borde);
	padding: .45rem 1rem;
	border-radius: 100px;
}
.ccd-portada .ccd-etiqueta {
	color: #DDF0CE;
	background: rgba(255, 255, 255, .12);
	border-color: rgba(255, 255, 255, .28);
}

/* Cifras de la portada */
.ccd-avales {
	border-top: 1px solid rgba(255, 255, 255, .2);
	padding-top: 2rem;
	margin-top: 3rem;
}
.ccd-aval strong {
	display: block;
	color: #fff;
	font-size: 1.55rem;
	font-weight: 700;
	line-height: 1.2;
}
.ccd-aval span {
	font-size: .86rem;
	color: rgba(255, 255, 255, .72);
}

/* Tarjeta blanca del formulario sobre la portada */
.ccd-tarjeta-form {
	background: #fff;
	border-radius: 24px;
	box-shadow: var(--ccd-sombra-alta);
	color: var(--wp--preset--color--gris-700);
}
.ccd-tarjeta-form :is(h2, h3) {
	color: var(--wp--preset--color--gris-900);
}
.ccd-tarjeta-form p {
	color: var(--wp--preset--color--gris-500);
}

/* =========================================================================
   Franja de compañías
   ========================================================================= */
.ccd-franja {
	background: var(--wp--preset--color--gris-100);
	border-bottom: 1px solid var(--wp--preset--color--gris-300);
}
.ccd-franja .ccd-titulo-franja {
	font-size: .88rem;
	font-weight: 650;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gris-500);
	margin: 0;
}
/* Los logos vienen con proporciones muy distintas (SURA es apaisado, Reale
   es vertical). Igualar la altura y limitar el ancho los deja ópticamente
   equilibrados sin deformar ninguno. */
.ccd-logos img {
	max-height: 48px;
	max-width: 120px;
	width: auto;
	height: auto;
	object-fit: contain;
	filter: grayscale(1);
	opacity: .6;
	transition: var(--ccd-trans);
}
.ccd-logos img:hover {
	filter: none;
	opacity: 1;
}

/* Ajuste fino por marca: igualar la altura a secas deja a los logos
   verticales visualmente mucho más débiles que a los apaisados. */
.ccd-logos .ccd-logo-sura {
	max-height: 42px;
}
.ccd-logos .ccd-logo-hdi {
	max-height: 50px;
}
.ccd-logos .ccd-logo-bci {
	max-height: 56px;
}
.ccd-logos .ccd-logo-reale {
	max-height: 62px;
}

.ccd-logos-pendiente {
	font-size: .85rem;
	color: var(--wp--preset--color--gris-500);
	margin: 0;
}

/* =========================================================================
   Tarjetas de servicio
   ========================================================================= */
.ccd-tarjeta {
	background: #fff;
	border: 1.5px solid var(--wp--preset--color--gris-300);
	border-radius: var(--ccd-radio);
	transition: var(--ccd-trans);
	height: 100%;
}
.ccd-tarjeta:hover {
	border-color: var(--wp--preset--color--verde);
	transform: translateY(-6px);
	box-shadow: var(--ccd-sombra);
}
.ccd-tarjeta h3 {
	margin-bottom: .5rem;
}
.ccd-tarjeta p {
	font-size: .98rem;
	color: var(--wp--preset--color--gris-500);
}
.ccd-icono {
	width: 56px;
	height: 56px;
	border-radius: 16px;
	background: var(--wp--preset--color--verde-claro);
	border: 1px solid var(--wp--preset--color--verde-borde);
	display: flex;
	align-items: center;
	justify-content: center;
}
.ccd-icono svg {
	width: 28px;
	height: 28px;
	stroke: var(--wp--preset--color--verde-oscuro);
	fill: none;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.ccd-enlace-flecha {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	font-weight: 650;
	font-size: .97rem;
	color: var(--wp--preset--color--verde-oscuro);
}
.ccd-enlace-flecha svg {
	width: 17px;
	height: 17px;
	stroke: currentColor;
	fill: none;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: var(--ccd-trans);
}
.ccd-tarjeta:hover .ccd-enlace-flecha svg {
	transform: translateX(5px);
}

/* =========================================================================
   Nosotros
   ========================================================================= */
.ccd-foto-marco {
	position: relative;
	border-radius: 24px;
	overflow: hidden;
	box-shadow: var(--ccd-sombra-alta);
}
.ccd-foto-marco img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 0;
}
.ccd-firma {
	position: absolute;
	left: 1.5rem;
	right: 1.5rem;
	bottom: 1.5rem;
	background: rgba(255, 255, 255, .96);
	backdrop-filter: blur(10px);
	border-radius: var(--ccd-radio-sm);
	padding: 1.1rem 1.3rem;
}
.ccd-firma strong {
	display: block;
	color: var(--wp--preset--color--gris-900);
	font-size: 1.02rem;
}
.ccd-firma span {
	font-size: .86rem;
	color: var(--wp--preset--color--verde-oscuro);
	font-weight: 600;
}

/* =========================================================================
   Pasos
   ========================================================================= */
.ccd-paso .ccd-numero {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--wp--preset--color--verde);
	color: #fff;
	font-size: 1.25rem;
	font-weight: 700;
	box-shadow: 0 6px 18px rgba(111, 160, 80, .3);
}
.ccd-paso p {
	font-size: .98rem;
	color: var(--wp--preset--color--gris-500);
}

/* =========================================================================
   Testimonios
   ========================================================================= */
.ccd-testimonios {
	background: var(--wp--preset--color--verde-profundo);
	color: rgba(255, 255, 255, .88);
}
.ccd-testimonios :is(h2, h3) {
	color: #fff;
}
.ccd-cita {
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .15);
	border-radius: var(--ccd-radio);
	height: 100%;
}
.ccd-cita p {
	color: rgba(255, 255, 255, .92);
}
.ccd-estrellas {
	display: flex;
	gap: .2rem;
}
.ccd-estrellas svg {
	width: 19px;
	height: 19px;
	fill: #F2C14E;
}
.ccd-avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .18);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	color: #fff;
}
.ccd-cita strong {
	display: block;
	color: #fff;
	font-size: .97rem;
}
.ccd-cita small {
	color: rgba(255, 255, 255, .6);
	font-size: .85rem;
}

/* =========================================================================
   Preguntas frecuentes — bloque "Detalles" de WordPress
   ========================================================================= */
.ccd-faq .wp-block-details {
	border: 1.5px solid var(--wp--preset--color--gris-300);
	border-radius: var(--ccd-radio-sm);
	padding: 1.25rem 1.5rem;
	background: #fff;
	transition: var(--ccd-trans);
}
.ccd-faq .wp-block-details[open] {
	border-color: var(--wp--preset--color--verde);
	box-shadow: var(--ccd-sombra);
}
.ccd-faq summary {
	cursor: pointer;
	font-weight: 650;
	color: var(--wp--preset--color--gris-900);
	font-size: 1.03rem;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
}
.ccd-faq summary::-webkit-details-marker {
	display: none;
}
.ccd-faq summary::after {
	content: "+";
	font-size: 1.5rem;
	color: var(--wp--preset--color--verde);
	font-weight: 400;
	line-height: 1;
	flex-shrink: 0;
}
.ccd-faq .wp-block-details[open] summary::after {
	content: "–";
}
.ccd-faq .wp-block-details p {
	margin: .9rem 0 0;
	font-size: .98rem;
	color: var(--wp--preset--color--gris-500);
}

/* =========================================================================
   Cierre
   ========================================================================= */
.ccd-cierre {
	background: linear-gradient(115deg, #31502A, #6FA050);
	color: #fff;
}
.ccd-cierre :is(h2, h3) {
	color: #fff;
}
.ccd-cierre p {
	color: rgba(255, 255, 255, .9);
}
.ccd-cierre .wp-block-button__link {
	background: #fff;
	color: var(--wp--preset--color--verde-profundo);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}
.ccd-cierre .wp-block-button__link:hover {
	background: var(--wp--preset--color--verde-claro);
	color: var(--wp--preset--color--verde-profundo);
}

/* =========================================================================
   Pie de página
   ========================================================================= */
.ccd-pie {
	background: #243039;
	color: rgba(255, 255, 255, .62);
	font-size: .95rem;
}
.ccd-pie :is(h2, h3, h4) {
	color: #fff;
	font-size: .82rem;
	letter-spacing: .11em;
	text-transform: uppercase;
	font-weight: 700;
}
.ccd-pie a {
	color: rgba(255, 255, 255, .62);
	transition: var(--ccd-trans);
}
.ccd-pie a:hover {
	color: #B8DFA0;
	text-decoration: none;
}
.ccd-pie .wp-block-site-logo img {
	height: 44px;
	width: auto;
}
.ccd-pie .wp-block-list {
	list-style: none;
	padding: 0;
	margin: 0;
}
.ccd-pie .wp-block-list li {
	margin-bottom: .7rem;
}
.ccd-pie-contacto a {
	display: inline-flex;
	gap: .7rem;
	align-items: center;
}
.ccd-pie-contacto svg {
	width: 17px;
	height: 17px;
	stroke: var(--wp--preset--color--verde);
	fill: none;
	stroke-width: 1.8;
	flex-shrink: 0;
}
.ccd-pie-base {
	border-top: 1px solid rgba(255, 255, 255, .12);
	font-size: .86rem;
}

/* =========================================================================
   Botón flotante de WhatsApp
   ========================================================================= */
.ccd-flotante {
	position: fixed;
	right: 1.5rem;
	bottom: 1.5rem;
	z-index: 70;
	display: flex;
	align-items: center;
	gap: .7rem;
	background: #25D366;
	color: #fff;
	padding: .85rem 1.4rem;
	border-radius: 100px;
	font-weight: 650;
	font-size: .97rem;
	box-shadow: 0 8px 26px rgba(37, 211, 102, .42);
	transition: var(--ccd-trans);
	text-decoration: none;
}
.ccd-flotante:hover {
	transform: translateY(-3px);
	color: #fff;
	text-decoration: none;
}
.ccd-flotante svg {
	width: 22px;
	height: 22px;
	fill: #fff;
}

/* =========================================================================
   Formulario de contacto propio del tema
   ========================================================================= */
.ccd-campo {
	margin-bottom: 1.4rem;
}
/* Dos campos en una misma línea (ej: Patente + Marca). En pantallas
   angostas se apilan para no apretar el texto ni los controles. */
.ccd-fila {
	display: flex;
	gap: 2rem;
}
.ccd-fila .ccd-campo {
	flex: 1 1 0;
	min-width: 0;
}
@media (max-width: 560px) {
	.ccd-fila {
		flex-direction: column;
		gap: 0;
	}
}
.ccd-campo label {
	display: block;
	font-size: .83rem;
	font-weight: 650;
	color: var(--wp--preset--color--gris-900);
	margin-bottom: .5rem;
}
.ccd-campo :is(input, select, textarea) {
	box-sizing: border-box;
	width: 100%;
	font: inherit;
	font-size: .97rem;
	padding: .9rem 1.1rem;
	border: 1.5px solid var(--wp--preset--color--gris-300);
	border-radius: var(--ccd-radio-sm);
	background: #fff;
	color: var(--wp--preset--color--gris-900);
	transition: var(--ccd-trans);
}
.ccd-campo textarea {
	resize: vertical;
	min-height: 100px;
}
.ccd-campo :is(input, select, textarea):focus {
	outline: 0;
	border-color: var(--wp--preset--color--verde);
	box-shadow: 0 0 0 4px rgba(111, 160, 80, .16);
}

/* Combobox de Marca/Modelo: input de texto + lista flotante filtrable. */
.ccd-combobox {
	position: relative;
}
.ccd-combobox-lista {
	position: absolute;
	z-index: 30;
	top: calc(100% + .35rem);
	left: 0;
	right: 0;
	margin: 0;
	padding: .35rem;
	list-style: none;
	max-height: 240px;
	overflow-y: auto;
	background: #fff;
	border: 1.5px solid var(--wp--preset--color--gris-300);
	border-radius: var(--ccd-radio-sm);
	box-shadow: var(--ccd-sombra-alta);
}
.ccd-combobox-lista[hidden] {
	display: none;
}
.ccd-combobox-lista li {
	padding: .55rem .75rem;
	border-radius: calc(var(--ccd-radio-sm) - 4px);
	cursor: pointer;
	font-size: .93rem;
	color: var(--wp--preset--color--gris-900);
}
.ccd-combobox-lista li:hover,
.ccd-combobox-lista li.ccd-combobox-activa {
	background: var(--wp--preset--color--verde-claro);
}
.ccd-campo input[aria-invalid="true"] {
	border-color: #C0392B;
}
.ccd-combobox-error {
	margin: .4rem 0 0;
	font-size: .82rem;
	color: #9B3A28;
}
.ccd-combobox-error[hidden] {
	display: none;
}
.ccd-consentimiento {
	display: flex;
	gap: .7rem;
	align-items: flex-start;
	font-size: .84rem;
	color: var(--wp--preset--color--gris-500);
	margin: 1.2rem 0;
}
.ccd-consentimiento input {
	margin-top: .28rem;
	accent-color: var(--wp--preset--color--verde);
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}
.ccd-boton-envio {
	width: 100%;
	font: inherit;
	font-weight: 650;
	font-size: 1rem;
	padding: .95rem 1.9rem;
	border: 0;
	border-radius: 100px;
	background: var(--wp--preset--color--verde);
	color: #fff;
	cursor: pointer;
	transition: var(--ccd-trans);
	box-shadow: 0 6px 18px rgba(111, 160, 80, .32);
}
.ccd-boton-envio:hover {
	background: var(--wp--preset--color--verde-oscuro);
	transform: translateY(-2px);
}
.ccd-nota-legal {
	font-size: .79rem;
	color: var(--wp--preset--color--gris-500);
	text-align: center;
	line-height: 1.5;
	margin: 1rem 0 0;
}
.ccd-aviso {
	border-radius: var(--ccd-radio-sm);
	padding: 1rem 1.2rem;
	margin-bottom: 1.2rem;
	font-size: .95rem;
}
.ccd-aviso-ok {
	background: var(--wp--preset--color--verde-claro);
	border: 1px solid var(--wp--preset--color--verde-borde);
	color: var(--wp--preset--color--verde-profundo);
}
.ccd-aviso-error {
	background: #FDF0EE;
	border: 1px solid #F3C9C1;
	color: #9B3A28;
}

/* Botón de contorno sobre la portada oscura. */
.ccd-portada .is-style-outline .wp-block-button__link {
	background: transparent;
	border: 2px solid rgba(255, 255, 255, .5);
	color: #fff;
}
.ccd-portada .is-style-outline .wp-block-button__link:hover {
	background: rgba(255, 255, 255, .14);
	border-color: #fff;
	color: #fff;
}

/* Encabezado del formulario dentro de la tarjeta blanca. */
.ccd-formulario h3 {
	font-size: 1.32rem;
	margin-bottom: .35rem;
}
.ccd-formulario .ccd-bajada {
	font-size: .94rem;
	color: var(--wp--preset--color--gris-500);
	margin-bottom: 1.6rem;
}

/* Marcador de posición para la foto del equipo. */
.ccd-foto-hueco {
	aspect-ratio: 4 / 5;
	background: linear-gradient(160deg, #E4ECE0, #CFDEC4);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .8rem;
	text-align: center;
	padding: 2rem;
	color: var(--wp--preset--color--verde-profundo);
}
.ccd-foto-hueco svg {
	width: 64px;
	height: 64px;
	stroke: var(--wp--preset--color--verde-oscuro);
	fill: none;
	stroke-width: 1.4;
	opacity: .75;
}
.ccd-foto-hueco strong {
	font-size: 1.05rem;
}
.ccd-foto-hueco span {
	font-size: .9rem;
	color: var(--wp--preset--color--verde-oscuro);
	max-width: 24ch;
}

/* =========================================================================
   Página de siniestros
   ========================================================================= */
.ccd-companias-rejilla {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1rem;
	margin-top: 2.2rem;
}
.ccd-compania {
	background: #fff;
	border: 1.5px solid var(--wp--preset--color--gris-300);
	border-radius: var(--ccd-radio-sm);
	padding: 1.4rem 1.5rem;
	transition: var(--ccd-trans);
}
.ccd-compania:hover {
	border-color: var(--wp--preset--color--verde);
	box-shadow: var(--ccd-sombra);
}
.ccd-compania h3 {
	font-size: 1.05rem;
	margin: 0 0 .6rem;
}
.ccd-solo-telefono {
	font-size: .92rem;
	color: var(--wp--preset--color--gris-500);
	font-style: italic;
}

/* La tarjeta de "lesionados o fallecidos" se distingue: es el caso grave. */
.ccd-tarjeta-alerta {
	border-color: #E7C9A8;
	background: #FDF8F2;
}
.ccd-tarjeta-alerta .ccd-icono {
	background: #FAEEE0;
	border-color: #EBD4B8;
}
.ccd-tarjeta-alerta .ccd-icono svg {
	stroke: #B5761F;
}
.ccd-tarjeta .wp-block-list {
	font-size: .98rem;
	color: var(--wp--preset--color--gris-700);
	padding-left: 1.1rem;
}
.ccd-tarjeta .wp-block-list li {
	margin-bottom: .7rem;
}

.ccd-tabla-asistencia {
	overflow-x: auto;
	margin-top: 2rem;
	border: 1.5px solid var(--wp--preset--color--gris-300);
	border-radius: var(--ccd-radio-sm);
}
.ccd-tabla-asistencia table {
	width: 100%;
	border-collapse: collapse;
	font-size: .97rem;
	min-width: 480px;
}
.ccd-tabla-asistencia :is(th, td) {
	text-align: left;
	padding: .95rem 1.2rem;
	border-bottom: 1px solid var(--wp--preset--color--gris-300);
}
.ccd-tabla-asistencia thead th {
	background: var(--wp--preset--color--gris-100);
	font-size: .78rem;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gris-500);
	font-weight: 700;
}
.ccd-tabla-asistencia tbody th {
	color: var(--wp--preset--color--gris-900);
	font-weight: 650;
}
.ccd-tabla-asistencia tbody tr:last-child :is(th, td) {
	border-bottom: 0;
}

/* Datos de contacto sobre fondo verde profundo. */
.ccd-datos-claros strong {
	color: #fff;
}
.ccd-datos-claros small {
	color: rgba(255, 255, 255, .68);
}
.ccd-datos-claros svg {
	stroke: #B8DFA0;
}
.ccd-datos-claros a:hover strong {
	color: #B8DFA0;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* =========================================================================
   Cotizador web (chat con Barry)
   Página aparte, no forma parte del landing. El contenedor de la página
   reserva la altura de la pantalla menos la cabecera; el chat llena el
   resto — así funciona como una app de mensajería tanto en el teléfono
   como en escritorio.
   ========================================================================= */
.ccd-chat-pagina {
	/* dvh en vez de vh: en el celular, vh incluye el espacio que tapa la
	   barra de direcciones aunque no esté visible, y el chat queda más alto
	   de lo que realmente se ve. dvh se ajusta a la altura visible real. */
	height: calc(100dvh - 80px);
	display: flex;
	flex-direction: column;
	max-width: 720px;
	margin: 0 auto;
	width: 100%;
}
/* wp:post-content se renderiza como un <div class="entry-content"> propio
   entre <main> y el chat — sin esta regla, ese div queda con su alto de
   contenido ("flow-root") en vez de heredar el alto disponible, y el chat
   de abajo no tiene de dónde estirarse. */
.ccd-chat-pagina > .entry-content {
	flex: 1;
	display: flex;
	min-height: 0;
}

.ccd-chat {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 0;
	width: 100%;
	background: #fff;
}
@media (min-width: 640px) {
	.ccd-chat-pagina {
		padding: 1.5rem 1rem;
	}
	.ccd-chat {
		border: 1.5px solid var(--wp--preset--color--gris-300);
		border-radius: var(--ccd-radio);
		overflow: hidden;
		box-shadow: var(--ccd-sombra-alta);
	}
}

.ccd-chat-mensajes {
	flex: 1;
	overflow-y: auto;
	padding: 1.25rem 1rem;
	display: flex;
	flex-direction: column;
	gap: .55rem;
	background: linear-gradient(180deg, #F4F8F1, #FBFCFA 260px);
	overscroll-behavior: contain;
}

.ccd-chat-burbuja {
	max-width: 82%;
	padding: .65rem .9rem;
	border-radius: 1rem;
	font-size: .95rem;
	line-height: 1.45;
	white-space: pre-wrap;
	word-break: break-word;
	box-shadow: 0 1px 2px rgba(46, 58, 66, .06);
}
.ccd-chat-burbuja.entrante {
	align-self: flex-start;
	background: #fff;
	border: 1px solid var(--wp--preset--color--gris-300);
	border-bottom-left-radius: .3rem;
	color: var(--wp--preset--color--gris-900);
}
.ccd-chat-burbuja.saliente {
	align-self: flex-end;
	background: var(--wp--preset--color--verde-oscuro);
	color: #fff;
	border-bottom-right-radius: .3rem;
}

.ccd-chat-escribiendo {
	display: flex;
	gap: .3rem;
	align-items: center;
	padding: .8rem 1rem;
}
.ccd-chat-escribiendo span {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--gris-500);
	animation: ccd-rebote 1.1s infinite ease-in-out;
}
.ccd-chat-escribiendo span:nth-child(2) { animation-delay: .15s; }
.ccd-chat-escribiendo span:nth-child(3) { animation-delay: .3s; }
@keyframes ccd-rebote {
	0%, 60%, 100% { transform: translateY(0); opacity: .5; }
	30% { transform: translateY(-4px); opacity: 1; }
}

.ccd-chat-compositor {
	display: flex;
	gap: .6rem;
	align-items: flex-end;
	padding: .75rem;
	border-top: 1px solid var(--wp--preset--color--gris-300);
	background: #fff;
	/* Deja espacio bajo el compositor en celulares con gesto de inicio
	   (iPhone sin botón físico) para que el navegador no lo tape. */
	padding-bottom: max(.75rem, env(safe-area-inset-bottom));
}
.ccd-chat-compositor textarea {
	flex: 1;
	resize: none;
	max-height: 120px;
	border: 1.5px solid var(--wp--preset--color--gris-300);
	border-radius: 1.4rem;
	padding: .6rem 1rem;
	font: inherit;
	font-size: .95rem;
	line-height: 1.4;
	color: var(--wp--preset--color--gris-900);
}
.ccd-chat-compositor textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--verde);
}
.ccd-chat-compositor button {
	flex-shrink: 0;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: none;
	background: var(--wp--preset--color--verde);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: var(--ccd-trans);
}
.ccd-chat-compositor button:hover {
	background: var(--wp--preset--color--verde-oscuro);
}
.ccd-chat-compositor button:disabled {
	opacity: .5;
	cursor: default;
}
.ccd-chat-compositor button svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

/* =========================================================================
   Utilidades
   ========================================================================= */
.ccd-limite {
	max-width: 660px;
}
.ccd-sombra-alta {
	box-shadow: var(--ccd-sombra-alta);
}

/* Ajustes responsivos que los bloques no cubren por sí solos. */
@media (max-width: 781px) {
	.ccd-flotante span {
		display: none;
	}
	.ccd-flotante {
		padding: 1rem;
		border-radius: 50%;
	}
	.ccd-cabecera .wp-block-button {
		display: none;
	}
	.ccd-avales {
		margin-top: 2rem;
	}
}