/*
Theme Name: Icono Informática
Template: twentytwentyfive
Description: Tema hijo de Twenty Twenty-Five para pepeicono.com (Icono Informática, Lepe). Sustituye al antiguo tema "icono" (copia de Porto).
Author: SistemasFAMP
Author URI: https://sistemasfamp.com
Version: 1.0.0
Requires at least: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: icono-tt5
*/

/* ---------- Cabecera ---------- */
.barra-superior {
	font-size: 12px;
	border-bottom: 1px solid #e9e9e9;
}
.barra-superior p { margin: 0; }
.barra-superior .tel::before {
	content: "";
	display: inline-block;
	width: 12px;
	height: 12px;
	margin: 0 4px -1px 4px;
	background: url(assets/img/ic-telefono.svg) no-repeat center / contain;
}
.barra-superior .wp-block-search__input {
	border-radius: 20px;
	font-size: 12px;
	padding: 6px 14px;
	min-width: 140px;
}
.barra-superior .wp-block-search__inside-wrapper {
	border-radius: 20px;
	padding: 0;
}
.barra-superior .wp-block-search__button {
	border-radius: 20px;
	padding: 4px 8px;
	background: transparent;
	color: #999;
}
.barra-superior .wc-block-mini-cart__button { color: var(--wp--preset--color--accent-1); }

.cabecera-principal .wp-block-site-logo { margin-bottom: 0; }

.menu-principal .wp-block-navigation-item__content {
	display: block;
	padding: 8px 10px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-1);
}
.menu-principal .wp-block-navigation-item__content:hover,
.menu-principal .current-menu-item > .wp-block-navigation-item__content {
	background: var(--wp--preset--color--accent-1);
	color: #fff;
	text-decoration: none;
}

/* ---------- Banner de pizarra ---------- */
.banner-pizarra .tiza {
	font-family: var(--wp--preset--font-family--tiza);
	color: #e8e8e8;
	line-height: 1;
	margin: 0;
}
.banner-pizarra .tiza.grande { font-size: clamp(2.2rem, 4vw, 3.2rem); }
.banner-pizarra .tiza.pequena { font-size: clamp(1.4rem, 2.4vw, 2rem); padding-left: 1.5em; }

.banner-pizarra .tiza.mediana { font-size: clamp(1.6rem, 3vw, 2.2rem); }

/* Carrusel de la portada (lo activa assets/js/carrusel.js; sin JS se ven seguidas) */
.carrusel-portada > .diapositiva { margin: 0; }
.carrusel-portada.activo {
	display: grid;
	position: relative;
}
.carrusel-portada.activo > .diapositiva {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.8s ease, visibility 0.8s;
}
.carrusel-portada.activo > .diapositiva.visible {
	opacity: 1;
	visibility: visible;
}
.carrusel-portada.activo > .diapositiva.visible .wp-block-cover__inner-container {
	animation: entrar-diapositiva 0.9s ease both;
}
@keyframes entrar-diapositiva {
	from { opacity: 0; transform: translateY(24px); }
	to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.carrusel-portada.activo > .diapositiva { transition: none; }
	.carrusel-portada.activo > .diapositiva.visible .wp-block-cover__inner-container { animation: none; }
}
.carrusel-puntos {
	position: absolute;
	left: 50%;
	bottom: 16px;
	transform: translateX(-50%);
	display: flex;
	gap: 10px;
	z-index: 2;
}
.carrusel-puntos button {
	width: 11px;
	height: 11px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.4);
	cursor: pointer;
}
.carrusel-puntos button.activo,
.carrusel-puntos button:hover { background: #fff; }

.titulo-diapositiva {
	margin: 0.1em 0;
	color: #fff !important;
	font-size: clamp(2.4rem, 5vw, 3.9rem);
	font-weight: 800;
	letter-spacing: 0;
	line-height: 1.1;
}
.rayas-tiza::before,
.rayas-tiza::after {
	content: "";
	display: inline-block;
	width: 37px;
	height: 10px;
	margin: 0 12px;
	vertical-align: middle;
	background: url(assets/img/raya-tiza.png) no-repeat center / contain;
}
.nube-tiza {
	width: min(415px, 100%);
	aspect-ratio: 415 / 227;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: url(assets/img/nube-tiza.png) no-repeat center / contain;
}
.nube-tiza .tiza { text-align: center; padding: 0 !important; }

/* ---------- Franja "Máxima producción" ---------- */
.franja-oscura p { margin: 0; }
.franja-oscura .texto-tiza,
.texto-tiza {
	font-family: var(--wp--preset--font-family--tiza);
	color: var(--wp--preset--color--accent-1);
	font-style: normal;
	font-size: 1.6em;
	line-height: 1;
}

/* ---------- Titulares con palabra destacada ---------- */
.titulo-destacado { font-weight: 300; }
.titulo-destacado mark {
	padding: 0 0.4em;
	font-weight: 600;
	transition: opacity 0.3s;
}
.titulo-destacado mark.cambiando { opacity: 0; }

/* ---------- Bloque concepto (círculos) ---------- */
.concepto {
	background: url(assets/img/linea-concepto.svg) no-repeat center 30% / 100% 70%;
}
.concepto .wp-block-image img {
	border-radius: 50%;
	border: 1px dashed #bbb;
	padding: 8px;
	background: #fff;
	box-shadow: 0 18px 12px -14px rgba(0, 0, 0, 0.25);
}
.concepto .texto-tiza { font-size: 1.9rem; }

/* ---------- Funciones ---------- */
.funcion {
	position: relative;
	padding-left: 46px;
	min-height: 34px;
}
.funcion::before {
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent-1) var(--icono) no-repeat center / 15px;
}
.funcion p { margin: 0; }
.funcion p:first-child { color: var(--wp--preset--color--accent-1); font-size: 16px; }
.funcion p + p { font-size: 12px; }
.ic-usuario { --icono: url(assets/img/ic-usuario.svg); }
.ic-tienda { --icono: url(assets/img/ic-tienda.svg); }
.ic-documento { --icono: url(assets/img/ic-documento.svg); }
.ic-usuario-mas { --icono: url(assets/img/ic-usuario-mas.svg); }
.ic-lista { --icono: url(assets/img/ic-lista.svg); }
.ic-engranaje { --icono: url(assets/img/ic-engranaje.svg); }
.ic-ojo { --icono: url(assets/img/ic-ojo.svg); }
.ic-birrete { --icono: url(assets/img/ic-birrete.svg); }

/* "Más de nosotros" como acordeón de Porto */
.acordeon .wp-block-details {
	border: 1px solid #ddd;
	border-radius: 4px;
	margin-bottom: 6px;
	padding: 0;
}
.acordeon .wp-block-details summary {
	padding: 10px 14px;
	color: var(--wp--preset--color--accent-1);
	background: #f5f5f5;
	cursor: pointer;
}
.acordeon .wp-block-details > :not(summary) { padding: 4px 14px 10px; margin: 0; font-size: 13px; }

/* Separador con degradado como en Porto */
.separador-degradado {
	border: 0 !important;
	height: 1px !important;
	background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.15), transparent);
}

/* Marcas */
.marcas figure { margin: 0; text-align: center; }
.marcas img { height: 29px; width: auto; }

/* Testimonios */
.testimonio {
	font-size: 1rem;
	border-left: 4px solid var(--wp--preset--color--accent-1) !important;
	font-style: italic;
}
.testimonio cite { font-style: normal; font-weight: 600; color: var(--wp--preset--color--contrast); }

/* ---------- Pie ---------- */
html { scroll-behavior: smooth; }
.pie-moderno {
	position: relative;
	isolation: isolate;
	color: #9aa4b2;
	font-size: 14px;
}
/* Fondo oscuro con brillos azules y textura de puntos; empieza a media altura de la tarjeta */
.pie-moderno::before {
	content: "";
	position: absolute;
	inset: 75px 0 0 0;
	z-index: -1;
	background:
		radial-gradient(520px 320px at 12% 35%, rgba(0, 136, 204, 0.28), transparent 70%),
		radial-gradient(480px 300px at 92% 75%, rgba(0, 190, 255, 0.14), transparent 70%),
		radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 22px 22px,
		linear-gradient(180deg, #0d141c, #070a0e);
}
.pie-moderno a { color: #e6edf5; text-decoration: none; }

/* Tarjeta de llamada a la acción */
.pie-cta {
	position: relative;
	overflow: hidden;
	gap: 24px;
	padding: 36px 44px;
	border-radius: 22px;
	background: linear-gradient(120deg, #0088cc 0%, #0069a8 55%, #00a6e6 100%);
	box-shadow: 0 24px 60px -20px rgba(0, 136, 204, 0.6);
	color: #fff;
}
.pie-cta::after {
	content: "";
	position: absolute;
	top: 0;
	left: -60%;
	width: 50%;
	height: 100%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.18), transparent);
	transform: skewX(-20deg);
	animation: brillo-cta 6s ease-in-out infinite;
	pointer-events: none;
}
@keyframes brillo-cta {
	0%, 60% { left: -60%; }
	100% { left: 130%; }
}
.pie-cta h2.pie-cta-titulo { margin: 0 0 6px; color: #fff; font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 700; }
.pie-cta .pie-cta-texto { margin: 0; color: rgba(255, 255, 255, 0.85); font-size: 15px; }
.pie-cta-botones { position: relative; z-index: 1; }
.pie-cta .boton-llamar .wp-block-button__link {
	background: #fff;
	color: #0077b3;
	font-weight: 700;
	border-radius: 999px;
	transition: transform 0.2s, box-shadow 0.2s;
}
.pie-cta .boton-escribir .wp-block-button__link {
	border: 2px solid rgba(255, 255, 255, 0.8);
	background: transparent;
	color: #fff;
	border-radius: 999px;
	transition: transform 0.2s, background 0.2s;
}
.pie-cta .wp-block-button__link:hover { transform: translateY(-2px); text-decoration: none; box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.4); }
.pie-cta .boton-escribir .wp-block-button__link:hover { background: rgba(255, 255, 255, 0.12); }

.pie-columnas { margin-top: 56px !important; }
.pie-moderno .pie-titulo {
	position: relative;
	margin: 0 0 20px;
	padding-bottom: 10px;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.pie-moderno .pie-titulo::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 32px;
	height: 3px;
	border-radius: 3px;
	background: linear-gradient(90deg, #0088cc, #33c3ff);
}
.pie-logo img {
	padding: 10px 14px;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 10px 30px -10px rgba(0, 136, 204, 0.5);
}
.pie-lema { line-height: 1.7; }
.pie-lema strong { color: #33c3ff; }

/* Datos de contacto en tarjetas con icono */
.pie-dato { margin: 0 0 10px; }
.pie-dato a {
	position: relative;
	display: block;
	padding: 10px 12px 10px 56px;
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.03);
	line-height: 1.45;
	transition: transform 0.2s, border-color 0.2s, background 0.2s;
}
.pie-dato a span {
	display: block;
	color: #6b7686;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.pie-dato a::before {
	content: "";
	position: absolute;
	left: 10px;
	top: 50%;
	width: 34px;
	height: 34px;
	margin-top: -17px;
	border-radius: 10px;
	background: linear-gradient(135deg, #0088cc, #00b3ff);
}
.pie-dato a::after {
	content: "";
	position: absolute;
	left: 19px;
	top: 50%;
	width: 16px;
	height: 16px;
	margin-top: -8px;
	background: #fff;
	-webkit-mask: var(--icono) no-repeat center / contain;
	mask: var(--icono) no-repeat center / contain;
}
.pie-dato a:hover {
	transform: translateY(-2px);
	border-color: rgba(0, 170, 255, 0.45);
	background: rgba(0, 136, 204, 0.1);
}
.dato-pin { --icono: url(assets/img/ic-pin.svg); }
.dato-telefono { --icono: url(assets/img/ic-telefono-mask.svg); }
.dato-correo { --icono: url(assets/img/ic-correo.svg); }

/* Enlaces con flecha animada */
.pie-enlaces { list-style: none; margin: 0; padding: 0; }
.pie-enlaces li { margin: 0 0 10px; }
.pie-enlaces a {
	display: inline-flex;
	align-items: center;
	color: #c4ccd6;
	transition: color 0.2s, transform 0.2s;
}
.pie-enlaces a::before {
	content: "";
	width: 14px;
	height: 14px;
	margin-right: 8px;
	background: #0088cc;
	-webkit-mask: url(assets/img/ic-flecha.svg) no-repeat center / contain;
	mask: url(assets/img/ic-flecha.svg) no-repeat center / contain;
	transition: transform 0.2s, background 0.2s;
}
.pie-enlaces a:hover { color: #fff; transform: translateX(4px); }
.pie-enlaces a:hover::before { background: #33c3ff; transform: translateX(2px); }

/* Mapa oscuro que se colorea al pasar el ratón */
.pie .mapa {
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 14px;
	box-shadow: 0 16px 40px -18px rgba(0, 0, 0, 0.8);
}
.pie .mapa iframe {
	display: block;
	width: 100%;
	height: 190px;
	border: 0;
	filter: grayscale(1) invert(0.92) hue-rotate(180deg) brightness(0.9) contrast(0.9);
	transition: filter 0.4s;
}
.pie .mapa:hover iframe { filter: none; }

/* Barra final con línea de luz */
.pie-final {
	position: relative;
	margin-top: 48px !important;
	padding: 22px 0 26px;
	font-size: 13px;
}
.pie-final::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(0, 170, 255, 0.7), transparent);
}
.pie-final p { margin: 0; color: #6b7686; }
.pie-arriba a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #c4ccd6;
}
.pie-arriba a::after {
	content: "";
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #0088cc;
	transition: transform 0.2s;
}
.pie-arriba a:hover::after { transform: translateY(-3px); }
/* Flecha blanca (máscara) sobre el círculo azul */
.pie-arriba a { position: relative; }
.pie-arriba a::before {
	content: "";
	position: absolute;
	right: 8px;
	top: 50%;
	width: 14px;
	height: 14px;
	margin-top: -7px;
	z-index: 1;
	background: #fff;
	-webkit-mask: url(assets/img/ic-arriba.svg) no-repeat center / contain;
	mask: url(assets/img/ic-arriba.svg) no-repeat center / contain;
	transition: transform 0.2s;
}
.pie-arriba a:hover::before { transform: translateY(-3px); }

@media (prefers-reduced-motion: reduce) {
	.pie-cta::after { animation: none; }
}
@media (max-width: 781px) {
	.pie-cta { padding: 28px 24px; }
	.pie-moderno::before { inset: 140px 0 0 0; }
	.diapositiva .wp-block-column { text-align: center; }
}

/* ---------- Página de contacto ---------- */
.contacto-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	text-align: center;
	color: #c4ccd6;
	background:
		radial-gradient(520px 300px at 15% 20%, rgba(0, 136, 204, 0.35), transparent 70%),
		radial-gradient(480px 300px at 88% 90%, rgba(0, 190, 255, 0.18), transparent 70%),
		radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 22px 22px,
		linear-gradient(180deg, #0d141c, #070a0e);
}
.contacto-hero .contacto-etiqueta {
	display: inline-block;
	margin: 0 auto 14px;
	padding: 5px 14px;
	border: 1px solid rgba(51, 195, 255, 0.4);
	border-radius: 999px;
	background: rgba(0, 136, 204, 0.12);
	color: #33c3ff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.contacto-hero h1.contacto-titulo {
	margin: 0 0 12px;
	color: #fff;
	font-size: clamp(2.2rem, 5vw, 3.4rem);
	font-weight: 800;
	letter-spacing: -0.03em;
}
.texto-degradado {
	background: linear-gradient(90deg, #33c3ff, #0088cc);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.contacto-hero .contacto-subtitulo { max-width: 620px; margin: 0 auto; font-size: 1.1rem; font-weight: 300; }

.contacto-cuerpo {
	position: relative;
	z-index: 1;
	margin-top: -90px !important;
}
.tarjeta-formulario {
	padding: 36px 40px;
	border: 1px solid #e6ebf1;
	border-radius: 22px;
	background: #fff;
	box-shadow: 0 30px 70px -30px rgba(13, 20, 28, 0.35);
}
.tarjeta-formulario .tarjeta-titulo { margin: 0; font-size: 1.6rem; font-weight: 700; }
.tarjeta-formulario .tarjeta-texto { margin: 4px 0 24px; font-size: 13px; }

/* Columna lateral: datos y horario */
.contacto-lateral { display: flex; flex-direction: column; gap: 20px; }
.contacto-info {
	padding: 22px;
	border: 1px solid #e6ebf1;
	border-radius: 22px;
	background: #fff;
	box-shadow: 0 30px 70px -30px rgba(13, 20, 28, 0.35);
}
.contacto-dato { margin: 0 0 10px; }
.contacto-dato:last-child { margin-bottom: 0; }
.contacto-dato a {
	position: relative;
	display: block;
	padding: 12px 12px 12px 62px;
	border: 1px solid #edf1f5;
	border-radius: 14px;
	background: #f8fafc;
	color: var(--wp--preset--color--contrast);
	line-height: 1.45;
	text-decoration: none;
	transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.contacto-dato a span {
	display: block;
	color: #8a94a3;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.contacto-dato a::before {
	content: "";
	position: absolute;
	left: 12px;
	top: 50%;
	width: 38px;
	height: 38px;
	margin-top: -19px;
	border-radius: 11px;
	background: linear-gradient(135deg, #0088cc, #00b3ff);
	box-shadow: 0 8px 18px -8px rgba(0, 136, 204, 0.7);
}
.contacto-dato a::after {
	content: "";
	position: absolute;
	left: 23px;
	top: 50%;
	width: 16px;
	height: 16px;
	margin-top: -8px;
	background: #fff;
	-webkit-mask: var(--icono) no-repeat center / contain;
	mask: var(--icono) no-repeat center / contain;
}
.contacto-dato a:hover {
	transform: translateY(-2px);
	border-color: rgba(0, 136, 204, 0.35);
	box-shadow: 0 12px 24px -16px rgba(0, 136, 204, 0.6);
	text-decoration: none;
}
.contacto-horario {
	position: relative;
	overflow: hidden;
	padding: 22px 24px;
	border-radius: 22px;
	color: #c4ccd6;
	background:
		radial-gradient(300px 200px at 100% 0%, rgba(0, 136, 204, 0.35), transparent 70%),
		linear-gradient(180deg, #111a24, #0a0f15);
}
.contacto-horario h3 {
	margin: 0 0 14px;
	padding-left: 30px;
	color: #fff;
	font-size: 1rem;
	font-weight: 700;
	position: relative;
}
.contacto-horario h3::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 20px;
	height: 20px;
	margin-top: -10px;
	background: #33c3ff;
	-webkit-mask: url(assets/img/ic-reloj.svg) no-repeat center / contain;
	mask: url(assets/img/ic-reloj.svg) no-repeat center / contain;
}
.contacto-horario ul { list-style: none; margin: 0; padding: 0; }
.contacto-horario li {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 9px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	font-size: 14px;
}
.contacto-horario li strong { color: #fff; font-weight: 600; white-space: nowrap; }
.contacto-horario li.cerrado strong { color: #ff8a8a; }

/* Horario dinámico [icono_horario] (plugin icono-horario) */
.icono-horario .horario-cabecera {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 12px;
	margin-bottom: 4px;
}
.icono-horario h3.horario-titulo { margin: 0; }
.horario-estado {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 4px 11px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
}
.horario-estado::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
}
.horario-estado.abierto { color: #3ddc84; background: rgba(61, 220, 132, 0.12); }
.horario-estado.abierto::before { animation: latido 1.8s ease-in-out infinite; }
.horario-estado.cerrado { color: #ff8a8a; background: rgba(255, 138, 138, 0.12); }
@keyframes latido {
	0%, 100% { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0.6); }
	50% { box-shadow: 0 0 0 6px rgba(61, 220, 132, 0); }
}
@media (prefers-reduced-motion: reduce) {
	.horario-estado.abierto::before { animation: none; }
}
.icono-horario .horario-temporada { margin: 8px 0 6px; color: #8a94a3; font-size: 12px; letter-spacing: 0.04em; }
.contacto-horario li.cerrado strong { color: #ff8a8a; }
.icono-horario .horario-aviso {
	margin: 14px 0 0;
	padding: 10px 12px;
	border-left: 3px solid #ffb547;
	border-radius: 8px;
	background: rgba(255, 181, 71, 0.1);
	color: #ffd08a;
	font-size: 13px;
}

/* ---------- Formulario de contacto (Contact Form 7) ---------- */
.wpcf7 .cf-rejilla {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px 20px;
	margin-bottom: 18px;
}
.wpcf7 .cf-campo { margin-bottom: 18px; }
.wpcf7 .cf-rejilla .cf-campo { margin-bottom: 0; }
.wpcf7 .cf-campo > label,
.wpcf7 .cf-etiqueta {
	display: block;
	margin-bottom: 7px;
	color: var(--wp--preset--color--contrast);
	font-size: 13px;
	font-weight: 600;
}
.wpcf7 .wpcf7-form-control-wrap { position: relative; display: block; }
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 select,
.wpcf7 textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 13px 16px;
	border: 1.5px solid #dfe5ec;
	border-radius: 12px;
	background: #f8fafc;
	color: var(--wp--preset--color--contrast);
	font: inherit;
	font-size: 15px;
	transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.wpcf7 textarea { min-height: 140px; resize: vertical; }
.wpcf7 ::placeholder { color: #9aa4b2; }
.wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
	outline: none;
	border-color: #0088cc;
	background: #fff;
	box-shadow: 0 0 0 4px rgba(0, 136, 204, 0.15);
}
/* Icono dentro de los campos */
.wpcf7 [class*="cf-ic-"] input,
.wpcf7 [class*="cf-ic-"] select { padding-left: 46px; }
.wpcf7 [class*="cf-ic-"] .wpcf7-form-control-wrap::before {
	content: "";
	position: absolute;
	left: 16px;
	top: 25px;
	width: 18px;
	height: 18px;
	margin-top: -9px;
	z-index: 1;
	background: #9aa4b2;
	-webkit-mask: var(--icono) no-repeat center / contain;
	mask: var(--icono) no-repeat center / contain;
	pointer-events: none;
	transition: background 0.2s;
}
.wpcf7 [class*="cf-ic-"] .wpcf7-form-control-wrap:focus-within::before { background: #0088cc; }
.cf-ic-usuario { --icono: url(assets/img/ic-usuario.svg); }
.cf-ic-correo { --icono: url(assets/img/ic-correo.svg); }
.cf-ic-telefono { --icono: url(assets/img/ic-telefono-mask.svg); }
.cf-ic-herramienta { --icono: url(assets/img/ic-herramienta.svg); }
/* Desplegable con flecha propia */
.wpcf7 select {
	-webkit-appearance: none;
	appearance: none;
	padding-right: 42px;
	cursor: pointer;
}
.wpcf7 .cf-desplegable .wpcf7-form-control-wrap::after {
	content: "";
	position: absolute;
	right: 16px;
	top: 25px;
	width: 16px;
	height: 16px;
	margin-top: -8px;
	background: #6b7686;
	-webkit-mask: url(assets/img/ic-chevron.svg) no-repeat center / contain;
	mask: url(assets/img/ic-chevron.svg) no-repeat center / contain;
	pointer-events: none;
}
/* Dispositivo: botones tipo píldora */
.wpcf7 .wpcf7-radio { display: flex; flex-wrap: wrap; gap: 8px; }
.wpcf7 .wpcf7-radio .wpcf7-list-item { margin: 0; }
.wpcf7 .wpcf7-radio label {
	display: inline-flex;
	align-items: center;
	padding: 9px 16px;
	border: 1.5px solid #dfe5ec;
	border-radius: 999px;
	background: #f8fafc;
	color: #4a5563;
	font-size: 14px;
	cursor: pointer;
	user-select: none;
	transition: all 0.2s;
}
.wpcf7 .wpcf7-radio input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}
.wpcf7 .wpcf7-radio label:hover { border-color: #0088cc; color: #0088cc; }
.wpcf7 .wpcf7-radio label:has(input:checked) {
	border-color: transparent;
	background: linear-gradient(135deg, #0088cc, #00a6e6);
	color: #fff;
	box-shadow: 0 8px 18px -10px rgba(0, 136, 204, 0.9);
}
.wpcf7 .wpcf7-radio label:has(input:focus-visible) { box-shadow: 0 0 0 4px rgba(0, 136, 204, 0.25); }
/* Privacidad */
.wpcf7 .cf-privacidad { margin: 6px 0 22px; font-size: 13px; color: #6b7686; }
.wpcf7 .cf-privacidad .wpcf7-list-item { margin: 0; }
.wpcf7 .cf-privacidad label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.wpcf7 .cf-privacidad input[type="checkbox"] {
	flex: none;
	width: 18px;
	height: 18px;
	margin: 1px 0 0;
	accent-color: #0088cc;
}
/* Botón de envío */
.wpcf7 .cf-enviar { display: flex; align-items: center; gap: 12px; margin: 0; }
.wpcf7 input[type="submit"] {
	padding: 15px 56px 15px 30px;
	border: 0;
	border-radius: 999px;
	color: #fff;
	font: inherit;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	background: url(assets/img/ic-enviar-blanco.svg) no-repeat right 24px center / 18px, linear-gradient(135deg, #0088cc, #00a6e6);
	box-shadow: 0 14px 30px -14px rgba(0, 136, 204, 0.9);
	transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
}
.wpcf7 input[type="submit"]:hover:not(:disabled) {
	transform: translateY(-2px);
	box-shadow: 0 18px 34px -14px rgba(0, 136, 204, 1);
}
.wpcf7 input[type="submit"]:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
.wpcf7 .wpcf7-spinner { margin: 0; }
/* Mensajes */
.wpcf7 .wpcf7-not-valid { border-color: #e5484d !important; background: #fff7f7 !important; }
.wpcf7 .wpcf7-not-valid-tip { margin-top: 5px; color: #e5484d; font-size: 12px; }
.wpcf7 form .wpcf7-response-output {
	margin: 20px 0 0;
	padding: 14px 18px;
	border: 0;
	border-left: 4px solid #0088cc;
	border-radius: 12px;
	background: #eef8fd;
	color: var(--wp--preset--color--contrast);
	font-size: 14px;
}
.wpcf7 form.sent .wpcf7-response-output { border-left-color: #1f9d55; background: #edf9f1; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output { border-left-color: #e5484d; background: #fff4f4; }

@media (max-width: 781px) {
	.contacto-hero { padding-bottom: 110px !important; }
	.tarjeta-formulario { padding: 26px 20px; }
	.wpcf7 .cf-rejilla { grid-template-columns: 1fr; }
	.wpcf7 input[type="submit"] { width: 100%; }
}

/* ---------- Móvil ---------- */
@media (max-width: 781px) {
	.barra-superior .bienvenida { display: none; }
	.concepto { background: none; }
	.franja-oscura .wp-block-buttons { justify-content: flex-start !important; }
}