/*
Theme Name: InsuranceDoc Child
Theme URI: https://insurancedoc.us
Description: Tema hijo de Hello Elementor para insurancedoc.us. Todo lo hecho a mano vive aqui y en los mu-plugins idoc-*.
Author: InsuranceDoc
Template: hello-elementor
Version: 1.3.0
Text Domain: insurancedoc-child
*/

/* ==========================================================================
   Tokens
   --------------------------------------------------------------------------
   Petrona (display) es de Huerta Tipografica, fundicion argentina que dibuja
   para el espanol: acentos y ene nativos, no parcheados sobre una fuente
   inglesa. Lexend (texto) se diseno para mejorar la comprension lectora, que
   es literalmente el trabajo de este sitio.
   ========================================================================== */

:root {
	--idoc-papel:      #f7f8fa;
	--idoc-papel-alto: #ffffff;
	--idoc-tinta:      #131a2b;
	--idoc-tinta-sub:  #56617a;
	--idoc-linea:      #dfe4ec;

	--idoc-azul:       #1f3a66;
	--idoc-azul-osc:   #16294a;
	--idoc-azul-claro: #e9eef7;

	--idoc-ambar:      #ffc94a;

	--idoc-display: "Petrona", Georgia, "Times New Roman", serif;
	--idoc-texto:   "Lexend", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	--idoc-ancho:  68rem;
	--idoc-medida: 62ch;
}

/* ==========================================================================
   Base
   ========================================================================== */

body {
	font-family: var(--idoc-texto);
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--idoc-tinta);
	background: var(--idoc-papel);
	-webkit-font-smoothing: antialiased;
}

.site-main,
.page-content {
	max-width: var(--idoc-ancho);
	margin-inline: auto;
	padding-inline: 1.25rem;
}

h1, h2, h3, h4 {
	font-family: var(--idoc-display);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.011em;
	color: var(--idoc-tinta);
	text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 6.2vw, 3.6rem); margin: 0 0 1rem; }
h2 { font-size: clamp(1.6rem, 4vw, 2.35rem); margin: 3.25rem 0 .85rem; }
h3 { font-size: clamp(1.2rem, 2.6vw, 1.5rem); margin: 2.25rem 0 .5rem; }

p, li { max-width: var(--idoc-medida); }
p { margin: 0 0 1.1rem; }

a { color: var(--idoc-azul); text-underline-offset: .18em; text-decoration-thickness: .07em; }
a:hover { color: var(--idoc-azul-osc); }

strong { font-weight: 600; }

:focus-visible {
	outline: 3px solid var(--idoc-azul);
	outline-offset: 2px;
	border-radius: 2px;
}

/* ==========================================================================
   El unico gesto fuerte: el ambar resalta cifras, como subrayar un formulario.
   Se usa con <mark> en el contenido. Nada mas lleva ambar.
   ========================================================================== */

mark, .idoc-cifra {
	background: linear-gradient(to top, var(--idoc-ambar) 0.62em, transparent 0.62em);
	color: inherit;
	padding: 0 .12em;
	font-weight: 500;
}

/* ==========================================================================
   Cabecera
   ========================================================================== */

.site-header {
	background: var(--idoc-papel-alto);
	border-bottom: 1px solid var(--idoc-linea);
	padding-block: .9rem;
	position: sticky;
	top: 0;
	z-index: 100;
}

.site-header .site-branding,
.site-header .site-navigation {
	max-width: var(--idoc-ancho);
}

.site-title,
.site-title a {
	font-family: var(--idoc-display);
	font-size: 1.4rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--idoc-tinta);
	text-decoration: none;
}

/* Logo: escudo con corazon (protege y cuida). Sin cruz medica ni
   estetoscopio a proposito, para no reforzar la idea de que Miguel es medico. */
.idoc-logo {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	text-decoration: none;
}
.idoc-logo:hover { text-decoration: none; }

.idoc-marca { width: 25px; height: auto; flex: none; display: block; }
.idoc-marca__escudo  { fill: var(--idoc-azul); }
.idoc-marca__corazon { fill: #fff; }

.idoc-logo__texto {
	font-family: var(--idoc-display);
	font-size: 1.3rem;
	font-weight: 500;
	letter-spacing: -0.022em;
	line-height: 1;
	color: var(--idoc-tinta);
}
.idoc-logo__texto b { font-weight: 700; color: var(--idoc-azul); }

/* Telefono en la cabecera. El sitio existe para generar una llamada, asi que
   el numero no se esconde en la pagina de contacto: vive arriba, siempre. */
a.idoc-tel {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .5rem .95rem;
	font-family: var(--idoc-texto);
	font-size: .9rem;
	font-weight: 500;
	color: #fff;
	background: var(--idoc-azul);
	border-radius: 6px;
	text-decoration: none;
	white-space: nowrap;
}
a.idoc-tel:hover { background: var(--idoc-azul-osc); color: #fff; text-decoration: none; }
a.idoc-tel svg { width: 17px; height: 17px; fill: currentColor; flex: none; }

@media (max-width: 767px) {
	a.idoc-tel span { display: none; }
	a.idoc-tel { padding: .55rem .7rem; }
}

.site-navigation ul {
	gap: .35rem;
	flex-wrap: wrap;
}

.site-navigation a {
	font-family: var(--idoc-texto);
	font-size: .92rem;
	font-weight: 400;
	color: var(--idoc-tinta-sub);
	text-decoration: none;
	padding: .4rem .6rem;
	border-radius: 4px;
}

.site-navigation a:hover,
.site-navigation .current-menu-item > a {
	color: var(--idoc-azul);
	background: var(--idoc-azul-claro);
}

/* ==========================================================================
   Selector de idioma
   ========================================================================== */

.idoc-lang { display: inline-flex; gap: .15rem; align-items: center; }

.idoc-lang__bandera {
	width: 18px;
	height: 12px;
	display: block;
	border-radius: 2px;
	box-shadow: 0 0 0 1px rgba(19, 26, 43, .16) inset;
}

.idoc-lang__link {
	display: inline-flex;
	align-items: center;
	gap: .32em;
	padding: .28em .55em;
	font-family: var(--idoc-texto);
	font-size: .78rem;
	font-weight: 500;
	letter-spacing: .06em;
	color: var(--idoc-tinta-sub);
	text-decoration: none;
	border-radius: 4px;
	line-height: 1.3;
}

.idoc-lang__link:hover { background: var(--idoc-azul-claro); color: var(--idoc-azul); }

.idoc-lang__link--activo {
	background: var(--idoc-tinta);
	color: var(--idoc-papel-alto);
}
.idoc-lang__link--activo:hover { background: var(--idoc-tinta); color: var(--idoc-papel-alto); }

.idoc-lang__sep { display: none; }

/* ==========================================================================
   Contenido de pagina
   ========================================================================== */

.page-content > ol,
.page-content > ul { padding-left: 1.15rem; margin: 0 0 1.2rem; }
.page-content li { margin-bottom: .45rem; }

.page-content > ol {
	list-style: none;
	counter-reset: idoc-paso;
	padding-left: 0;
}
.page-content > ol > li {
	counter-increment: idoc-paso;
	position: relative;
	padding-left: 2.35rem;
	margin-bottom: .9rem;
}
.page-content > ol > li::before {
	content: counter(idoc-paso);
	position: absolute;
	left: 0;
	top: .12em;
	width: 1.65rem;
	height: 1.65rem;
	display: grid;
	place-items: center;
	font-family: var(--idoc-texto);
	font-size: .82rem;
	font-weight: 600;
	color: var(--idoc-azul);
	background: var(--idoc-azul-claro);
	border-radius: 50%;
}

/* ==========================================================================
   Presentacion: foto y credencial de Miguel
   --------------------------------------------------------------------------
   En seguros la cara es el producto: quien escanea un cartel quiere saber a
   quien le va a dar su telefono. Va arriba del todo, no en "Sobre mi".
   ========================================================================== */

.idoc-presenta {
	display: flex;
	align-items: center;
	gap: 1.1rem;
	margin: 0 0 1.75rem;
}

.idoc-presenta__foto {
	width: 108px;
	height: 108px;
	flex: none;
	border-radius: 50%;
	object-fit: cover;
	background: var(--idoc-azul-claro);
	border: 3px solid var(--idoc-papel-alto);
	box-shadow: 0 1px 8px rgba(19, 26, 43, .16);
}

.idoc-presenta__quien {
	display: flex;
	flex-direction: column;
	gap: .2rem;
	margin: 0;
	max-width: none;
}
.idoc-presenta__quien strong {
	font-family: var(--idoc-display);
	font-size: 1.4rem;
	font-weight: 600;
	letter-spacing: -0.018em;
	line-height: 1.15;
}
.idoc-presenta__quien span {
	font-size: .88rem;
	line-height: 1.45;
	color: var(--idoc-tinta-sub);
}

@media (max-width: 480px) {
	.idoc-presenta { gap: .85rem; }
	.idoc-presenta__foto { width: 84px; height: 84px; }
	.idoc-presenta__quien strong { font-size: 1.2rem; }
}

/* ==========================================================================
   Llamadas a la accion
   ========================================================================== */

.idoc-acciones {
	display: flex;
	flex-wrap: wrap;
	gap: .7rem;
	margin: 1.75rem 0 .5rem;
	max-width: var(--idoc-medida);
}

/* wpautop mete <br> y <p> dentro del div al guardar. En vez de pelear con el
   contenido, se neutralizan aqui: el layout lo decide el flex, no el editor. */
.idoc-acciones br { display: none; }
.idoc-acciones p  { margin: 0; max-width: none; display: contents; }

/* a.idoc-btn, no .idoc-btn: hello-elementor subraya los enlaces con un
   selector descendente que gana por especificidad. */
a.idoc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .85rem 1.5rem;
	font-family: var(--idoc-texto);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.35;
	border-radius: 6px;
	text-decoration: none;
	border: 1.5px solid transparent;
	transition: background-color .15s ease, border-color .15s ease;
}

a.idoc-btn:hover,
a.idoc-btn:focus-visible { text-decoration: none; }

a.idoc-btn--principal { background: var(--idoc-azul); color: #fff; }
a.idoc-btn--principal:hover { background: var(--idoc-azul-osc); color: #fff; }

a.idoc-btn--secundario {
	background: transparent;
	color: var(--idoc-tinta);
	border-color: var(--idoc-linea);
}
a.idoc-btn--secundario:hover { border-color: var(--idoc-azul); color: var(--idoc-azul); }

@media (prefers-reduced-motion: reduce) { .idoc-btn { transition: none; } }

/* ==========================================================================
   Pie
   --------------------------------------------------------------------------
   El pie de hello-elementor se oculta: solo pintaba "All rights reserved", en
   ingles tambien en las paginas en espanol.
   ========================================================================== */

.site-footer { display: none; }

.idoc-pie {
	width: 100%;
	box-sizing: border-box;
	margin-top: 3.5rem;
	background: var(--idoc-papel-alto);
	border-top: 1px solid var(--idoc-linea);
	font-family: var(--idoc-texto);
}

.idoc-pie__inner {
	max-width: var(--idoc-ancho);
	margin-inline: auto;
	padding: 2.25rem 1.25rem 1.75rem;
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr;
	gap: 2rem;
	align-items: start;
}

.idoc-pie p { margin: 0; max-width: none; }

.idoc-pie__nombre {
	font-family: var(--idoc-display);
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: -0.015em;
	color: var(--idoc-tinta);
	margin-bottom: .25rem !important;
}
.idoc-pie__cargo,
.idoc-pie__nota { font-size: .85rem; line-height: 1.5; color: var(--idoc-tinta-sub); }
.idoc-pie__lic  { font-size: .8rem; color: var(--idoc-tinta-sub); margin-top: .35rem !important; }

.idoc-pie__titulo {
	font-family: var(--idoc-display);
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--idoc-tinta);
	margin-bottom: .5rem !important;
}

a.idoc-pie__enlace {
	display: block;
	font-size: .95rem;
	color: var(--idoc-azul);
	text-decoration: none;
	padding: .15rem 0;
}
a.idoc-pie__enlace:hover { color: var(--idoc-azul-osc); text-decoration: underline; }

.idoc-pie__nota { margin-top: .6rem !important; }

/* La letra legal es obligatoria y larga. En una sola columna mide casi 200px y
   se lee como un muro; en tres columnas cabe en una franja y sigue siendo
   legible sin hacer clic, que es lo que exige CMS. */
.idoc-pie__legal {
	max-width: var(--idoc-ancho);
	margin-inline: auto;
	padding: 1.25rem 1.25rem 2.5rem;
	border-top: 1px solid var(--idoc-linea);
	font-size: .775rem;
	line-height: 1.5;
	color: var(--idoc-tinta-sub);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: .35rem 2rem;
	align-items: start;
}
.idoc-pie__legal p { max-width: none; margin: 0 !important; }

.idoc-pie__copy {
	grid-column: 1 / -1;
	margin-top: .9rem !important;
	/* deja sitio al boton flotante de WhatsApp, que vive abajo a la derecha */
	padding-right: 4.5rem;
}

@media (max-width: 820px) {
	.idoc-pie__inner  { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
	.idoc-pie__quien  { grid-column: 1 / -1; }
	.idoc-pie__legal  { grid-template-columns: 1fr 1fr; gap: .75rem 1.5rem; }
}

@media (max-width: 480px) {
	.idoc-pie__inner { grid-template-columns: 1fr; gap: 1.35rem; }
	.idoc-pie__legal { grid-template-columns: 1fr; gap: .6rem; padding-bottom: 4.5rem; }
}

/* ==========================================================================
   Boton flotante de WhatsApp
   ========================================================================== */

.idoc-wa {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	z-index: 9990;
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: #25d366;
	box-shadow: 0 2px 10px rgba(19, 26, 43, .25);
	transition: transform .15s ease;
}
.idoc-wa:hover, .idoc-wa:focus-visible { transform: scale(1.05); }
.idoc-wa svg { width: 29px; height: 29px; fill: #fff; }
@media (prefers-reduced-motion: reduce) { .idoc-wa { transition: none; } }

/* ==========================================================================
   Movil: el trafico llega escaneando un QR, casi todo por datos celulares
   ========================================================================== */

@media (max-width: 600px) {
	body { font-size: 1rem; }
	.site-header { position: static; }
	.idoc-acciones .idoc-btn { flex: 1 1 100%; justify-content: center; }
}

/* ==========================================================================
   Secciones de la portada
   --------------------------------------------------------------------------
   No hay seccion de testimonios a proposito: Miguel no tiene ninguno todavia,
   y las plantillas del sector vienen con testimonios falsos de relleno (la de
   Instive trae a dos actores de Game of Thrones). 45 CFR 155.220(j)(3)(iii)(G)
   prohibe usar la imagen o una cita de una figura notable afirmando que te
   respalda. "Como trabajo" da la misma confianza y ademas es cierto.
   ========================================================================== */

/* --- Heroe -------------------------------------------------------------- */

.idoc-hero {
	display: grid;
	grid-template-columns: 1.55fr .85fr;
	gap: 2.5rem;
	align-items: start;
	margin: 0 0 1rem;
}

.idoc-hero__lead {
	font-size: 1.2rem;
	line-height: 1.6;
	color: var(--idoc-tinta);
	max-width: 46ch;
}

.idoc-hero__nota {
	margin-top: 1rem !important;
	font-size: .88rem;
	color: var(--idoc-tinta-sub);
	max-width: 46ch;
}

.idoc-hero__ficha {
	margin: 0;
	padding: 1.35rem;
	background: var(--idoc-papel-alto);
	border: 1px solid var(--idoc-linea);
	border-radius: 10px;
	text-align: center;
}
.idoc-hero__ficha img {
	width: 132px;
	height: 132px;
	border-radius: 50%;
	object-fit: cover;
	margin: 0 auto .85rem;
	display: block;
	background: var(--idoc-azul-claro);
}
/* hello-elementor pone los figcaption en cursiva; aqui no es un pie de foto,
   es la ficha del agente. */
.idoc-hero__ficha figcaption { display: block; font-style: normal; }
.idoc-hero__ficha figcaption span { font-style: normal; }
.idoc-hero__nombre {
	display: block;
	font-family: var(--idoc-display);
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: -0.015em;
	color: var(--idoc-tinta);
	line-height: 1.2;
}
.idoc-hero__cargo {
	display: block;
	margin-top: .3rem;
	font-size: .82rem;
	line-height: 1.45;
	color: var(--idoc-tinta-sub);
}

/* --- Tarjetas de servicio ------------------------------------------------ */

.idoc-cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.1rem;
	margin: 1.5rem 0 0;
}

.idoc-card {
	padding: 1.5rem;
	background: var(--idoc-papel-alto);
	border: 1px solid var(--idoc-linea);
	border-radius: 10px;
	display: flex;
	flex-direction: column;
}
.idoc-card h3 { margin: 0 0 .5rem !important; font-size: 1.3rem !important; }
.idoc-card p  { font-size: .95rem; color: var(--idoc-tinta-sub); max-width: none; flex: 1; }
.idoc-card a  { font-weight: 500; font-size: .95rem; }

/* --- Como trabajo: pasos ------------------------------------------------- */

.idoc-pasos {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
	counter-reset: idoc-p;
}
.idoc-pasos li {
	counter-increment: idoc-p;
	margin: 0;
	max-width: none;
	padding-top: 2.4rem;
	position: relative;
	font-size: .95rem;
	color: var(--idoc-tinta-sub);
}
.idoc-pasos li::before {
	content: counter(idoc-p);
	position: absolute;
	top: 0;
	left: 0;
	width: 1.85rem;
	height: 1.85rem;
	display: grid;
	place-items: center;
	font-family: var(--idoc-texto);
	font-size: .85rem;
	font-weight: 600;
	color: #fff;
	background: var(--idoc-azul);
	border-radius: 50%;
}
.idoc-pasos strong {
	display: block;
	margin-bottom: .25rem;
	font-family: var(--idoc-display);
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--idoc-tinta);
}

/* --- Preguntas frecuentes ------------------------------------------------ */

.idoc-faq { margin: 1.5rem 0 0; max-width: var(--idoc-medida); }

.idoc-faq details {
	border-bottom: 1px solid var(--idoc-linea);
	padding: .15rem 0;
}
.idoc-faq summary {
	cursor: pointer;
	list-style: none;
	padding: .9rem 2rem .9rem 0;
	position: relative;
	font-family: var(--idoc-display);
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--idoc-tinta);
}
.idoc-faq summary::-webkit-details-marker { display: none; }
.idoc-faq summary::after {
	content: "+";
	position: absolute;
	right: .2rem;
	top: .72rem;
	font-family: var(--idoc-texto);
	font-size: 1.4rem;
	font-weight: 300;
	color: var(--idoc-azul);
	line-height: 1;
}
.idoc-faq details[open] summary::after { content: "\2013"; }
.idoc-faq details > p {
	margin: 0 0 1rem;
	font-size: .95rem;
	color: var(--idoc-tinta-sub);
}
.idoc-faq summary:focus-visible { outline: 3px solid var(--idoc-azul); outline-offset: 2px; }

/* --- Banda final de llamada a la accion ---------------------------------- */

.idoc-cierre {
	margin: 3rem 0 1rem;
	padding: 2.25rem 1.75rem;
	background: var(--idoc-azul);
	border-radius: 12px;
	color: #fff;
}
.idoc-cierre h2 {
	margin: 0 0 .6rem !important;
	color: #fff !important;
	font-size: clamp(1.5rem, 3.4vw, 2rem) !important;
}
.idoc-cierre p { color: rgba(255,255,255,.86); max-width: 52ch; }
.idoc-cierre .idoc-acciones { margin-top: 1.35rem; }
.idoc-cierre a.idoc-btn--principal { background: #fff; color: var(--idoc-azul); }
.idoc-cierre a.idoc-btn--principal:hover { background: var(--idoc-azul-claro); color: var(--idoc-azul-osc); }
.idoc-cierre a.idoc-btn--secundario { color: #fff; border-color: rgba(255,255,255,.45); }
.idoc-cierre a.idoc-btn--secundario:hover { border-color: #fff; color: #fff; }

/* --- Adaptacion a movil -------------------------------------------------- */

@media (max-width: 860px) {
	.idoc-hero  { grid-template-columns: 1fr; gap: 1.5rem; }
	.idoc-hero__ficha { display: flex; align-items: center; gap: 1rem; text-align: left; padding: 1rem; }
	.idoc-hero__ficha img { width: 84px; height: 84px; margin: 0; flex: none; }
	.idoc-cards { grid-template-columns: 1fr; }
	.idoc-pasos { grid-template-columns: 1fr; gap: 1.15rem; }
	.idoc-pasos li { padding-top: 0; padding-left: 2.6rem; }
	.idoc-pasos li::before { top: .1rem; }
}

@media (max-width: 600px) {
	.idoc-hero__lead { font-size: 1.08rem; }
	.idoc-cierre { padding: 1.75rem 1.25rem; border-radius: 10px; }
}

/* ==========================================================================
   Formulario (Bit Form)
   --------------------------------------------------------------------------
   Bit Form genera su CSS a partir del builder_helper_state, que aqui esta
   vacio porque el formulario se creo por CLI. Sin ese CSS, sus campos internos
   (csrf, t_identity, bitforms_id, bf_lang) se pintan como inputs de texto
   visibles. Se ocultan aqui y el resto se estila a mano, que ademas lo deja a
   juego con el sitio en vez de depender de su tema por defecto.
   ========================================================================== */

.bf-form > input[name="csrf"],
.bf-form > input[name="t_identity"],
.bf-form > input[name="bitforms_id"],
.bf-form > input[name="bf_lang"] {
	display: none !important;
}

.bf-form {
	max-width: 34rem;
	margin: 1.5rem 0 0;
	font-family: var(--idoc-texto);
}

.bf-fld-wrp { margin-bottom: 1.1rem; }

.bf-lbl {
	display: block;
	margin-bottom: .3rem;
	font-size: .92rem;
	font-weight: 500;
	color: var(--idoc-tinta);
	line-height: 1.4;
}

.bf-form input[type="text"],
.bf-form input[type="email"],
.bf-form input[type="tel"],
.bf-form input[type="number"],
.bf-form input[type="search"],
.bf-form textarea,
.bf-form select {
	width: 100%;
	box-sizing: border-box;
	padding: .7rem .85rem;
	font-family: var(--idoc-texto);
	font-size: 1rem;
	line-height: 1.4;
	color: var(--idoc-tinta);
	background: var(--idoc-papel-alto);
	border: 1.5px solid var(--idoc-linea);
	border-radius: 6px;
	transition: border-color .15s ease;
	/* 16px o mas: por debajo, iOS hace zoom al enfocar el campo */
	min-height: 2.9rem;
}

.bf-form input:focus,
.bf-form textarea:focus,
.bf-form select:focus {
	border-color: var(--idoc-azul);
	outline: 2px solid transparent;
	box-shadow: 0 0 0 3px var(--idoc-azul-claro);
}

/* --- Casillas ------------------------------------------------------------
   La de consentimiento lleva un texto largo por obligacion legal. Se alinea
   la casilla arriba, no al centro, o queda flotando a media altura del
   parrafo. */

.bf-form input[type="checkbox"] {
	width: 1.1rem;
	height: 1.1rem;
	margin: .18rem .6rem 0 0;
	flex: none;
	accent-color: var(--idoc-azul);
	cursor: pointer;
}

.bf-form .bf-fld-wrp:has(input[type="checkbox"]) .bf-lbl,
.bf-form label:has(input[type="checkbox"]) {
	display: flex;
	align-items: flex-start;
	font-weight: 400;
	font-size: .88rem;
	line-height: 1.5;
	color: var(--idoc-tinta-sub);
	cursor: pointer;
}

.bf-form .bf-lbl a { color: var(--idoc-azul); }

/* La casilla del consentimiento TCPA se destaca: es la que tiene efecto legal
   y la que el visitante debe leer de verdad antes de marcar. */
.bf-form .b1-6 {
	padding: .9rem 1rem;
	background: var(--idoc-azul-claro);
	border-radius: 8px;
	border: 1px solid #d3ddef;
}
.bf-form .b1-6 .bf-lbl { color: var(--idoc-tinta); }

/* --- Boton --------------------------------------------------------------- */

.bf-form button,
.bf-form input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: .9rem 1.5rem;
	margin-top: .4rem;
	font-family: var(--idoc-texto);
	font-size: 1rem;
	font-weight: 500;
	color: #fff;
	background: var(--idoc-azul);
	border: 1.5px solid transparent;
	border-radius: 6px;
	cursor: pointer;
	transition: background-color .15s ease;
}
.bf-form button:hover { background: var(--idoc-azul-osc); }

/* --- Errores ------------------------------------------------------------- */

.bf-err-txt,
.bf-err-msg {
	font-size: .85rem;
	color: #b3261e;
	margin-top: .3rem;
}
.bf-err-txt p { margin: 0; }

@media (prefers-reduced-motion: reduce) {
	.bf-form input, .bf-form textarea, .bf-form select, .bf-form button { transition: none; }
}

/* ==========================================================================
   Firma de la pagina "Sobre Miguel"
   --------------------------------------------------------------------------
   Es su propia frase de cierre, no un eslogan puesto por nosotros. Va en la
   serif y en el azul de la marca, sin cursiva: solo se cargan los pesos
   rectos de Petrona y una cursiva sintetizada se veria torcida.
   ========================================================================== */

.idoc-firma {
	margin: 2.25rem 0 0 !important;
	padding-top: 1.25rem;
	border-top: 1px solid var(--idoc-linea);
	font-family: var(--idoc-display);
	font-size: 1.35rem;
	font-weight: 600;
	letter-spacing: -0.015em;
	color: var(--idoc-azul);
}

/* Responsive parity: every section and disclosure remains available. */
.site-main { padding-block: clamp(1.5rem, 4vw, 3rem); }
.page-content { padding-inline: 0; }
.site-header .header-inner { max-width: var(--idoc-ancho); gap: .75rem; }
.idoc-mobile-language { display: none; }
.idoc-hero > *, .idoc-cards > *, .idoc-pasos > *, .idoc-pie__inner > *, .idoc-pie__legal > * { min-width: 0; }
.page-content, .idoc-pie { overflow-wrap: break-word; }
.page-content img, .page-content video, .page-content iframe { max-width: 100%; }
.idoc-lang__link { min-height: 44px; min-width: 44px; justify-content: center; }
a.idoc-tel { min-height: 44px; }
.idoc-pie__enlace { min-height: 44px; display: flex !important; align-items: center; }
.idoc-pie__legal { font-size: .875rem; line-height: 1.65; }
.idoc-pasos { list-style: none !important; }
.page-content ol.idoc-pasos > li { padding: 2.6rem 0 0; margin: 0; counter-increment: idoc-p; }
.page-content ol.idoc-pasos > li::before { content: counter(idoc-p); top: 0; width: 1.85rem; height: 1.85rem; background: var(--idoc-azul); color: white; }
.idoc-pasos li::marker { content: ''; }
.idoc-cierre :focus-visible { outline-color: white; }
.idoc-wa { right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); }

/* Use the native checkbox; Bit Form's unstyled SVG symbol took 150px. */
.bf-form .bf-cks, .bf-form .bf-box { display: none !important; }
.bf-form .bf-cw { display: flex; align-items: flex-start; gap: .7rem; }
.bf-form .bf-cw input[type="checkbox"] { width: 1.25rem; height: 1.25rem; min-height: 1.25rem; margin: .2rem 0 0; }
.bf-form .bf-cl { display: block; flex: 1; min-width: 0; min-height: 44px; font-size: .95rem; font-weight: 400; line-height: 1.65; cursor: pointer; }
.bf-form .bf-ct { white-space: normal; }
.bf-form .btcd-fld-itm:has(.bf-cw) { margin-bottom: 1.25rem; }
.bf-form .btcd-fld-itm:has(.bf-cw) .bf-fld-wrp { margin-bottom: 0; }
.bf-form input, .bf-form select, .bf-form textarea { max-width: 100%; }
.bf-form input[type="tel"] { width: 100%; font: inherit; font-size: 1rem; padding: .7rem .85rem; min-height: 2.9rem; border: 1.5px solid var(--idoc-linea); border-radius: 6px; }

@media (max-width: 1100px) {
  .site-header { position: static; }
  .site-header .header-inner { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; padding-inline: 1.25rem; }
  .site-header .site-branding { grid-column: 1; min-width: 0; }
  .site-header .site-navigation { display: none !important; }
  .site-header .site-navigation-toggle-holder { display: flex !important; padding: 0; margin: 0; }
  .site-header .site-navigation-toggle { min-height: 44px; min-width: 44px; }
  .site-header a.idoc-tel span { display: inline; }
  .site-header a.idoc-tel { padding: .55rem .7rem; font-size: .85rem; }
  .idoc-mobile-language { display: block; grid-column: 1 / -1; }
  .site-navigation-dropdown .idoc-lang-item { display: none; }
  .site-header .site-navigation-dropdown { top: 100%; max-height: 70vh; overflow-y: auto; }
  .site-navigation-dropdown a { min-height: 48px; display: flex; align-items: center; }
}
@media (max-width: 860px) {
  .page-content ol.idoc-pasos > li { padding: 0 0 0 2.6rem; }
  .page-content ol.idoc-pasos > li::before { top: .1rem; }
}
@media (max-width: 600px) {
  .site-main { padding-inline: 1.25rem; }
  .idoc-hero__ficha { gap: .8rem; }
  .idoc-hero__ficha img { width: 72px; height: 72px; }
  .idoc-hero__ficha figcaption { min-width: 0; }
  .idoc-pie__legal { grid-template-columns: 1fr; gap: 1rem; padding-bottom: 6rem; }
  .idoc-acciones a.idoc-btn { width: 100%; padding-inline: 1rem; }
  .idoc-wa { width: 48px; height: 48px; }
  .bf-form { padding-bottom: 1rem; }
}
@media (max-width: 360px) {
  .site-header .header-inner { padding-inline: .75rem; gap: .5rem; }
  .idoc-logo__texto { font-size: 1.1rem; }
  .idoc-marca { width: 22px; }
  .site-main { padding-inline: 1rem; }
  .idoc-hero__ficha { align-items: flex-start; }
  .idoc-hero__ficha img { width: 56px; height: 56px; }
}

/* ==========================================================================
   Fuentes autohospedadas (generadas por herramientas/fuentes.py de migue-ops)
   ========================================================================== */

/* Lexend, latin-ext */
@font-face {
  font-family: 'Lexend';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(fonts/lexend-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Lexend, latin */
@font-face {
  font-family: 'Lexend';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(fonts/lexend-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Petrona, latin-ext */
@font-face {
  font-family: 'Petrona';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(fonts/petrona-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Petrona, latin */
@font-face {
  font-family: 'Petrona';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(fonts/petrona-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Paridad movil, segunda pasada
   --------------------------------------------------------------------------
   Todo medido con herramientas/capturas/medir.py en 375 y 1280 px.
   ========================================================================== */

/* Un solo margen lateral para titulo, contenido, cabecera y pie.
   hello-elementor pone 10 px de padding a .site-main y OTROS 10 px al
   .entry-title que va dentro, con max-width escalonados por media query
   (500, 600, 800, 1140). Resultado: en movil el titulo empezaba a 20 px del
   borde y el texto a 10; en tablet el contenido no pasaba de 600 px; y en
   escritorio el titulo quedaba 6 px a la izquierda del texto.
   Se usa el mismo selector que hello para ganarle por orden de carga. */
body:not([class*=elementor-page-]) .site-main {
	max-width: calc(var(--idoc-ancho) + 2.5rem);
	padding-inline: 1.25rem;
}
.page-header .entry-title {
	max-width: none;
	padding-inline: 0;
}
.page-content {
	max-width: none;
	padding-inline: 0;
}
.idoc-pie__inner,
.idoc-pie__legal {
	max-width: calc(var(--idoc-ancho) + 2.5rem);
}
@media (max-width: 360px) {
	body:not([class*=elementor-page-]) .site-main { padding-inline: 1rem; }
}

/* El logo es un enlace: 44 px de alto como cualquier objetivo tactil. */
.idoc-logo { min-height: 44px; }

/* --- Selector de idioma en el menu de escritorio ----------------------------
   hello-elementor fuerza display:block en los enlaces del menu
   (.site-navigation ul.menu li a), asi que la bandera caia encima del texto.
   Y la regla general de color de los enlaces del menu dejaba el "ES" activo
   en gris sobre negro. */
.site-navigation ul.menu li a.idoc-lang__link {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	gap: .35em;
	padding: .3em .65em;
}
.site-navigation ul.menu li a.idoc-lang__link--activo,
.site-navigation ul.menu li a.idoc-lang__link--activo:hover {
	background: var(--idoc-tinta);
	color: var(--idoc-papel-alto);
}

/* --- Menu desplegable (movil y tablet) ------------------------------------- */
@media (max-width: 1100px) {
	/* La cabecera va en flujo normal para que en el telefono no se coma 130 px
	   de pantalla al hacer scroll. Pero con position:static deja de ser el
	   contenedor del desplegable, que es absolute: se colocaba a top:812px del
	   <body> y el menu se abria FUERA de la pantalla. relative conserva lo uno
	   y arregla lo otro. */
	.site-header { position: relative; }
	.site-header .site-navigation-dropdown {
		top: 100%;
		bottom: auto;
		margin-block-start: 0;
	}
}

.site-navigation-dropdown ul.menu {
	border-top: 1px solid var(--idoc-linea);
	box-shadow: 0 14px 28px rgba(19, 26, 43, .14);
}
.site-navigation-dropdown ul.menu li a {
	display: flex;
	align-items: center;
	min-height: 52px;
	padding: 0 1.25rem;
	font-family: var(--idoc-texto);
	font-size: 1.05rem;
	font-weight: 500;
	color: var(--idoc-tinta);
	background: var(--idoc-papel-alto);
	text-decoration: none;
	box-shadow: inset 0 -1px 0 var(--idoc-linea);
}
.site-navigation-dropdown ul.menu li a:hover { color: var(--idoc-azul); }
.site-navigation-dropdown ul.menu li.current-menu-item a {
	color: var(--idoc-azul);
	background: var(--idoc-azul-claro);
	box-shadow: inset 4px 0 0 var(--idoc-azul), inset 0 -1px 0 var(--idoc-linea);
}

/* --- La ficha de Miguel sube en una sola columna ----------------------------
   En escritorio la foto, el nombre y la credencial salen en la primera
   pantalla, a la derecha del texto. En una columna quedaban debajo de los
   botones: en un telefono de 812 px caian en y=742, casi fuera. En seguros la
   cara es el producto, asi que en movil sube justo debajo del titulo, como la
   firma de quien escribe. */
@media (max-width: 860px) {
	.idoc-hero__ficha { order: -1; }
}

/* El desplegable de hello-elementor es absolute, y su lista (ul.menu) tambien:
   el desplegable no tiene altura propia. Con el overflow-y:auto que necesita
   para poder hacer scroll en telefonos bajos, recortaba la lista entera: el
   boton pasaba a X y no aparecia ningun enlace. Con la lista en flujo normal,
   es ella la que le da altura al desplegable. */
.site-navigation-dropdown ul.menu { position: static; }

/* Los li del menu heredaban la regla base "p, li { max-width: 62ch }", que es
   para la medida del texto: en tablet las filas del desplegable se cortaban a
   620 px de ancho. */
.site-navigation li,
.site-navigation-dropdown li { max-width: none; }

/* En movil y tablet el selector de idioma ya va visible en la cabecera; en el
   desplegable salia repetido. La regla que lo ocultaba perdia contra
   ".site-navigation-dropdown ul.menu li" de hello, que fuerza display:block. */
.site-navigation-dropdown ul.menu li.idoc-lang-item { display: none; }

/* A11y: skip-to-content llega al <main id="content">, pero el header sticky
   tapa el primer heading. scroll-margin-top empuja el ancla para que el
   titulo no quede debajo de la cabecera. */
#content { scroll-margin-top: 96px; }

/* Mid-page CTA: aparece entre el intro y el detalle de paginas largas.
   Bloque compacto con boton primario + alternativa telefonica. */
.idoc-midpage-cta {
    margin: 32px 0;
    padding: 24px 28px;
    background: var(--idoc-azul-claro, #e9eef7);
    border-left: 4px solid var(--idoc-azul, #1f3a66);
    border-radius: 6px;
}
.idoc-midpage-cta p {
    margin: 0 0 12px;
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--idoc-tinta, #131a2b);
}
.idoc-midpage-cta p:last-child {
    margin-bottom: 0;
}
.idoc-midpage-cta strong {
    font-weight: 600;
    color: var(--idoc-azul-osc, #16294a);
}
.idoc-midpage-cta__btn {
    display: inline-block;
    background: var(--idoc-azul, #1f3a66);
    color: #fff;
    padding: 10px 20px;
    border-radius: 4px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s ease;
}
.idoc-midpage-cta__btn:hover {
    background: var(--idoc-azul-osc, #16294a);
    color: #fff;
}
.idoc-midpage-cta__alt {
    margin-left: 12px;
    font-size: 0.9375rem;
    color: var(--idoc-tinta-sub, #56617a);
}
.idoc-midpage-cta__alt a {
    color: var(--idoc-azul, #1f3a66);
    text-decoration: underline;
}
/* ==========================================================================
   Breadcrumbs
   ========================================================================== */

.idoc-breadcrumbs {
	max-width: var(--idoc-ancho, 68rem);
	margin: 0 auto 1.5rem;
	padding: 1rem 1.25rem 0;
	font-size: 0.875rem;
	color: var(--idoc-tinta-sub, #56617a);
}

.idoc-breadcrumbs__lista {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 0.5rem;
	align-items: center;
}

.idoc-breadcrumbs__item {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.idoc-breadcrumbs__lista a {
	color: var(--idoc-azul, #1f3a66);
	text-decoration: none;
}

.idoc-breadcrumbs__lista a:hover {
	text-decoration: underline;
}

.idoc-breadcrumbs__lista span[aria-current="page"] {
	color: var(--idoc-tinta, #131a2b);
	font-weight: 500;
}

.idoc-breadcrumbs__sep {
	color: var(--idoc-tinta-sub, #56617a);
	opacity: 0.6;
	margin-left: 0.25rem;
}

/* ==========================================================================
   Timestamp "Última actualización: hace X días"
   ========================================================================== */

.idoc-tstamp {
	max-width: var(--idoc-medida, 62ch);
	margin: 2.5rem auto 0;
	padding-top: 1rem;
	border-top: 1px solid var(--idoc-linea, #dfe4ec);
	color: var(--idoc-tinta-sub, #56617a);
	font-size: 0.875rem;
}

.idoc-tstamp small {
	font-size: inherit;
}

/* ==========================================================================
   404 page
   ========================================================================== */

.idoc-404__cabecera {
	max-width: var(--idoc-ancho, 68rem);
	margin: 3rem auto 2rem;
	padding: 0 1.25rem;
	text-align: center;
}

.idoc-404__codigo {
	font-family: var(--idoc-display);
	font-size: clamp(4rem, 12vw, 7rem);
	font-weight: 700;
	color: var(--idoc-azul, #1f3a66);
	opacity: 0.15;
	margin: 0;
	line-height: 1;
}

.idoc-404__titulo {
	font-family: var(--idoc-display);
	font-size: clamp(1.8rem, 5vw, 2.6rem);
	font-weight: 600;
	margin: 0.5rem 0 1rem;
	color: var(--idoc-tinta, #131a2b);
}

.idoc-404__lead {
	max-width: 38rem;
	margin: 0 auto;
	color: var(--idoc-tinta-sub, #56617a);
	font-size: 1.0625rem;
	line-height: 1.6;
}

.idoc-404__buscar {
	max-width: 38rem;
	margin: 2rem auto;
	padding: 0 1.25rem;
}

.idoc-404__buscar-wrap {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.idoc-404__input {
	flex: 1 1 16rem;
	min-width: 0;
	padding: 0.75rem 1rem;
	font: inherit;
	font-size: 1rem;
	background: var(--idoc-papel-alto, #fff);
	color: var(--idoc-tinta, #131a2b);
	border: 1.5px solid var(--idoc-linea, #dfe4ec);
	border-radius: 4px;
}

.idoc-404__input:focus-visible {
	outline: none;
	border-color: var(--idoc-azul, #1f3a66);
	box-shadow: 0 0 0 3px rgba(31, 58, 102, 0.18);
}

.idoc-404__boton {
	background: var(--idoc-azul, #1f3a66);
	color: #fff;
	border: 0;
	padding: 0.75rem 1.25rem;
	font: inherit;
	font-weight: 600;
	border-radius: 4px;
	cursor: pointer;
	transition: background 0.15s ease;
}

.idoc-404__boton:hover {
	background: var(--idoc-azul-osc, #16294a);
}

.idoc-404__o {
	max-width: 38rem;
	margin: 0 auto 2rem;
	padding: 0 1.25rem;
	text-align: center;
	font-size: 0.9375rem;
	color: var(--idoc-tinta-sub, #56617a);
}

.idoc-404__sugerencias {
	max-width: 38rem;
	margin: 2rem auto 1rem;
	padding: 0 1.25rem;
}

.idoc-404__h2 {
	font-family: var(--idoc-display);
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--idoc-tinta, #131a2b);
	margin: 0 0 0.75rem;
}

.idoc-404__lista {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.idoc-404__lista a {
	color: var(--idoc-azul, #1f3a66);
	text-decoration: none;
}

.idoc-404__lista a:hover {
	text-decoration: underline;
}

.idoc-acciones--404 {
	max-width: 38rem;
	margin: 2rem auto 3rem;
	padding: 0 1.25rem;
	justify-content: center;
}

.idoc-btn--wa {
	background: #25d366;
	color: #fff;
}

.idoc-btn--wa:hover {
	background: #1ebe5a;
	color: #fff;
}

@media (max-width: 600px) {
	.idoc-404__buscar-wrap {
		flex-direction: column;
	}
	.idoc-404__boton {
		width: 100%;
	}
}