/* TVC Visual Layer v1.0.0 — Fase 1: solo tokens, foco y movimiento reducido (sin efecto visual salvo el foco). */
:root {
	/* Marca (exactos) */
	--tvc-brand-red: #D7493C;
	--tvc-brand-blue: #73A1F0;
	--tvc-brand-black: #000000;
	--tvc-brand-white: #FFFFFF;
	/* Variantes derivadas */
	--tvc-red-700: #BE3E32;
	--tvc-blue-700: #3F6FC0;
	--tvc-ink-900: #111111;
	--tvc-surface-100: #F4F6F9;
	--tvc-border-500: #5F6B7A;
	/* Acento de interfaz aprobado por Miguel (Addendum 13): solo decorativo o superficie sin texto blanco; con texto, #000 */
	--tvc-accent-green: #78CC84;
	/* Legacy (alias) */
	--tvc-legacy-green: var(--tvc-accent-green);
	--tvc-legacy-blue-2: #74A6E4;
	/* Tipografía */
	--tvc-font-display: "Spline Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--tvc-font-text: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--tvc-fs-xs: 0.875rem;
	--tvc-fs-sm: 1rem;
	--tvc-fs-md: 1.25rem;
	--tvc-fs-lg: 1.5625rem;
	--tvc-fs-xl: clamp(1.75rem, 1.2rem + 1.8vw, 2.4rem);
	--tvc-lh-text: 1.5;
	--tvc-lh-title: 1.15;
	/* Espaciado (escala de 8 px) */
	--tvc-space-1: 4px;
	--tvc-space-2: 8px;
	--tvc-space-3: 12px;
	--tvc-space-4: 16px;
	--tvc-space-5: 24px;
	--tvc-space-6: 32px;
	--tvc-space-7: 48px;
	--tvc-space-8: 64px;
	--tvc-space-9: 96px;
	/* Contenedores y gutter */
	--tvc-container-stage: 1280px;
	--tvc-container-content: 1140px;
	--tvc-gutter: 32px;
	/* Bordes, sombra y movimiento */
	--tvc-radius: 0;
	--tvc-shadow-1: 0 1px 2px rgba(0, 0, 0, .12);
	--tvc-duration: 150ms;
	--tvc-ease: ease-out;
}

@media (max-width: 1023px) {
	:root { --tvc-gutter: 24px; }
}

@media (max-width: 767px) {
	:root { --tvc-gutter: 16px; }
}

body.tvc-v1 :focus-visible {
	outline: 3px solid #000;
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	body.tvc-v1 [class*="tvc-"] {
		transition-duration: 0.01ms;
	}
}

/* ==========================================================================
   F3TER START — Maqueta v4 aprobada por Miguel (2026-10-26)
   ADAPTADO por Claude Code al DOM real del espejo 545 (Fase 3-ter). Reemplaza el bloque F3 / F3-bis.
   Adaptaciones respecto a la referencia: ver comentarios "ADAPT:".
   Reglas: todo con prefijo body.tvc-v1; !important SOLO donde se indica
   (anular fondos/layout inline de Elementor) y documentado.
   ========================================================================== */
:root{
  /* ADAPT: los tokens de marca y --tvc-gutter ya están definidos arriba; aquí solo los nuevos. */
  --tvc-red-side:#C9443A;   /* derivado de #D7493C; solo superficie SIN texto */
  --tvc-player-max:900px; --tvc-dur:150ms;
  --tvc-font-ui:"Spline Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --tvc-font-text:"Open Sans",var(--tvc-font-ui);   /* Open Sans no se carga en 15/545: el fallback efectivo es Spline Sans */
}

/* ---------- 1. HEADER (23300a44) blanco, logo izq., botón menú der. ---------- */
body.tvc-v1 .tvc-header{
  background-color:#FFFFFF!important; background-image:none!important; /* anula degradado Elementor */
  box-sizing:border-box;   /* explícito: no depender del `*{box-sizing}` de los HTML pegados */
  height:auto; align-items:center; min-height:104px; padding:0 var(--tvc-gutter) 6px!important; border:0;   /* padding-bottom = alto de la cinta (6px; 4px ≤767); contenido = 104 − 6 = 98 → logo 72 con 13px arriba y 13px abajo */
  /* Header siempre visible: sticky CSS (sin JS ni Elementor sticky). !important por si Elementor/WP fijan position en línea o por clase. */
  position:sticky!important;
  top:var(--wp-admin--admin-bar--height,0px);         /* WP la define en html (32px; 46px ≤782px) cuando hay barra de admin */
  z-index:30;                                         /* < barra de admin (99999) y > reproductor; el panel del menú (20) vive dentro de este contexto */
}
@media (max-width:600px){ body.tvc-v1.admin-bar .tvc-header{top:0} }
/* Cinta de firma del header (ABAJO, en el borde inferior del blanco): 5 tramos iguales, animada (ver "CINTAS" al final). Anclada al header (position:sticky => bloque contenedor).
   Hairline: solo un box-shadow de 1px por encima de la cinta (separa el tramo blanco del fondo blanco). No hay otro ::after en el header. */
body.tvc-v1 .tvc-header::after{
  content:""; position:absolute; left:0; right:0; bottom:0; top:auto; height:6px; pointer-events:none;
  background-image:var(--tvc-ribbon-5); background-repeat:repeat-x; background-size:200% 100%; background-position-x:0;
  animation:tvc-ribbon 10s linear infinite;
  box-shadow:0 -1px 0 rgba(0,0,0,.08);
}
body.tvc-v1 .tvc-header .tvc-header__row{            /* 250503e7 */
  background:#FFFFFF; height:auto; min-height:0; margin-block:0; padding-block:0; align-self:center;   /* el fondo blanco cubre toda la fila: nada sobresale por debajo */
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;   /* logo centrado; el panel del menú sigue anclado a la derecha de la fila */
  width:100%; max-width:1280px; margin-inline:auto; position:relative; gap:16px;
}
/* ADAPT: columnas vacías del header (logo oculto 24746472, html vacío aa2d31d, redes ocultas 28ec9bce). */
body.tvc-v1 .tvc-header > .elementor-element-24746472,
body.tvc-v1 .tvc-header > .elementor-element-aa2d31d,
body.tvc-v1 .tvc-header > .elementor-element-28ec9bce{display:none}
body.tvc-v1 .tvc-header .tvc-logo{order:1; width:auto!important; min-width:0; max-width:100%; height:auto; margin:0; grid-column:2; grid-row:1; justify-self:center}
body.tvc-v1 .tvc-header .tvc-logo .elementor-widget-container{line-height:0}
body.tvc-v1 .tvc-header .tvc-logo img{height:72px; width:auto; max-width:none; display:block}   /* ADAPT: se quita tvc-logo-in; el widget conserva el zoomIn de Elementor (data-settings _animation) */
/* ADAPT: `.elementor-widget{position:relative}` haría del widget el bloque contenedor del panel; static => lo es .tvc-header__row. */
body.tvc-v1 .tvc-header .tvc-nav--header{order:2; width:auto!important; margin:0; position:static; grid-column:3; grid-row:1; justify-self:end}   /* el DOM menú→logo se mantiene (F8) */

/* Botón menú (details/summary, sin JS) */
body.tvc-v1 .tvc-menu{position:static}
body.tvc-v1 .tvc-menu__btn{
  list-style:none; cursor:pointer; width:48px; height:48px; background:var(--tvc-accent-green);
  display:flex; align-items:center; justify-content:center; border-radius:0; position:relative;
}
body.tvc-v1 .tvc-menu__btn::-webkit-details-marker{display:none}
body.tvc-v1 .tvc-menu__btn::marker{content:""}
body.tvc-v1 .tvc-menu__icon,
body.tvc-v1 .tvc-menu__icon::before,
body.tvc-v1 .tvc-menu__icon::after{
  display:block; width:22px; height:3px; background:#000000; position:relative;   /* negro/#78CC84 = 10,8:1 (blanco = 1,95:1 < 3:1 de WCAG 1.4.11) */
  transition:transform var(--tvc-dur) ease-out, opacity var(--tvc-dur) ease-out;
}
body.tvc-v1 .tvc-menu__icon::before,
body.tvc-v1 .tvc-menu__icon::after{content:""; position:absolute; left:0}
body.tvc-v1 .tvc-menu__icon::before{top:-8px}
body.tvc-v1 .tvc-menu__icon::after{top:8px}
body.tvc-v1 .tvc-menu[open] .tvc-menu__icon{background:transparent}
body.tvc-v1 .tvc-menu[open] .tvc-menu__icon::before{transform:translateY(8px) rotate(45deg)}
body.tvc-v1 .tvc-menu[open] .tvc-menu__icon::after{transform:translateY(-8px) rotate(-45deg)}
body.tvc-v1 .tvc-menu__btn:hover{background:#000000}
body.tvc-v1 .tvc-menu__btn:hover .tvc-menu__icon,
body.tvc-v1 .tvc-menu__btn:hover .tvc-menu__icon::before,
body.tvc-v1 .tvc-menu__btn:hover .tvc-menu__icon::after{background:var(--tvc-accent-green)}
body.tvc-v1 .tvc-menu[open] .tvc-menu__btn:hover .tvc-menu__icon{background:transparent}   /* en [open] el trazo central sigue transparente */
body.tvc-v1 .tvc-menu__btn:focus-visible{outline:3px solid #000000; outline-offset:2px}

/* Panel desplegable */
body.tvc-v1 .tvc-menu .tvc-nav__wrap{display:none}
body.tvc-v1 .tvc-menu[open] .tvc-nav__wrap{
  display:block; position:absolute; right:0; top:calc(100% + 24px); z-index:20;
  min-width:260px; background:#000000; border-top:4px solid var(--tvc-brand-red); padding:8px 0;
}
body.tvc-v1 .tvc-nav__list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
body.tvc-v1 .tvc-nav__link{
  display:block; padding:14px 20px; min-height:44px; color:#FFFFFF; text-decoration:none;
  font:600 17px/1.2 var(--tvc-font-ui); border-left:4px solid transparent; background:transparent;
}
body.tvc-v1 .tvc-nav__link:hover,
body.tvc-v1 .tvc-nav__link:focus-visible{background:#1A1A1A; border-left-color:var(--tvc-accent-green); outline:none}
body.tvc-v1 .tvc-nav__link:focus-visible{box-shadow:inset 0 0 0 3px #FFFFFF}
body.tvc-v1 .tvc-nav__link[aria-current="page"]{border-left-color:var(--tvc-brand-red)}

/* ---------- 2. ESCENARIO (74cc662c) rojo con laterales y motivos ---------- */
body.tvc-v1 .tvc-live{
  position:relative; width:100%; max-width:none; margin:0; /* ADAPT: Elementor da --margin-bottom:50% a 74cc662c */
  padding:28px var(--tvc-gutter) 34px!important;
  background-color:var(--tvc-brand-red)!important;          /* anula fondo blanco Elementor */
  background-image:
    linear-gradient(90deg,
      var(--tvc-red-side) 0 calc(50% - var(--tvc-player-max)/2 - 46px),
      transparent 0 calc(50% + var(--tvc-player-max)/2 + 46px),
      var(--tvc-red-side) 0)!important;
  background-repeat:no-repeat!important;
  background-position:0 0!important;
  background-size:100% 100%!important;
}
/* Franja de firma inferior: 4 tramos iguales (negro · blanco · azul · verde) */
body.tvc-v1 .tvc-live::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:6px; pointer-events:none;
  background-image:var(--tvc-ribbon-4); background-repeat:repeat-x; background-size:200% 100%; background-position-x:0;
  animation:tvc-ribbon 10s linear infinite;
}
/* Geometría del reproductor: ver el bloque F4 (un único sistema intrinsic-ratio). */
/* Pie del reproductor (TEXTO-B, widget .tvc-live-caption dentro de 18278c6). ADAPT: Elementor deja 20px de row-gap entre widgets: se anula para que el pie quede pegado al marco.
   ADAPT: el ancho es el del reproductor + el marco de 8px a cada lado (player-max + 16px) para que los bordes negros queden alineados; centrado con align-self (aguanta el desborde de 16px). */
body.tvc-v1 .tvc-live .e-con-inner{row-gap:0}
/* F4-bis: el pie queda FUERA de .tv-player y no entra en el cálculo 16:9. Mismo max-width que el reproductor; el box-shadow de 8px lo alinea con el marco negro. */
body.tvc-v1 .tvc-live .tvc-live-caption{
  position:static; float:none; clear:both; width:100%; max-width:var(--tvc-player-max); margin:8px auto 0; box-sizing:border-box;
  background:#000000; padding:14px 24px; text-align:center; box-shadow:0 0 0 8px #000000;
}
body.tvc-v1 .tvc-live .tvc-live-caption .elementor-widget-container{margin:0; padding:0}
body.tvc-v1 .tvc-live .tvc-live-caption,
body.tvc-v1 .tvc-live .tvc-live-caption p{color:#FFFFFF; font:500 18px/1.4 var(--tvc-font-ui); text-align:center}
body.tvc-v1 .tvc-live .tvc-live-caption p{margin:0}

/* Franja decorativa antigua 2193257 */
body.tvc-v1 .tvc-hide{display:none!important}

/* ---------- 3. CONTACTO (74672682): verde | blanco ---------- */
/* ADAPT: 74672682 es "boxed": sus hijos viven en `.e-con-inner` (display:flex column, max-width:var(--content-width)=1140px y
   padding vertical 50px de Elementor). La rejilla va en el interior; el exterior ocupa todo el ancho. */
body.tvc-v1 .tvc-contact{
  display:block; position:relative; width:100%; max-width:none; margin:0; padding:0!important;
  background-color:#FFFFFF!important; background-image:none!important;   /* anula degradado azul→rosa */
}
body.tvc-v1 .tvc-contact > .e-con-inner{
  display:grid; grid-template-columns:minmax(0,39fr) minmax(0,61fr);
  gap:0; width:100%; max-width:none; margin:0; padding:0; height:auto;
}
body.tvc-v1 .tvc-contact .tvc-contact__styles{display:none!important}   /* wrappers de <style>/<script>: siguen aplicando */
body.tvc-v1 .tvc-contact .tvc-contact__title{
  grid-column:1; grid-row:1; align-self:stretch; height:auto; min-height:0; margin:0!important; width:auto!important;
  background:var(--tvc-accent-green); padding:96px 80px; display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
}
/* ADAPT: el contenedor interno del widget no ocupa el alto de la columna; margin-block:auto lo centra de verdad respecto al alto del formulario. */
body.tvc-v1 .tvc-contact .tvc-contact__title .elementor-widget-container{flex:0 0 auto; height:auto; margin-block:auto; width:100%}
body.tvc-v1 .tvc-contact .tvc-contact__title{text-align:left}   /* ADAPT: Elementor centra el widget (text-align:center) */
body.tvc-v1 .tvc-contact .tvc-contact__title.elementor-widget-heading .elementor-heading-title{
  color:#000000; font:700 clamp(2.25rem,1.4rem + 2.4vw,3.5rem)/1.1 var(--tvc-font-ui); margin:0;
}
body.tvc-v1 .tvc-contact .tvc-contact__title.elementor-widget-heading .elementor-heading-title::after{
  content:""; display:block; width:120px; height:8px; background:#000000; margin-top:20px;
}
body.tvc-v1 .tvc-contact .tvc-contact__form{
  grid-column:2; grid-row:1; align-self:start; margin:0!important; width:auto!important; background:#FFFFFF; padding:64px 80px;
}
body.tvc-v1 .tvc-contact .ff-el-input--label label{color:#000000; font:600 16px/1.3 var(--tvc-font-ui)}
body.tvc-v1 .tvc-contact .ff-el-form-control{
  border:1px solid var(--tvc-border-500); border-radius:0; background:#FFFFFF; color:#000000;
  min-height:48px; font:400 16px/1.4 var(--tvc-font-text);
}
body.tvc-v1 .tvc-contact .ff-el-form-control:focus{border-color:#000000; outline:3px solid #000000; outline-offset:0; box-shadow:none}
/* ADAPT: el azul NO es un style="" inline: viene de un <style> de Fluent Forms (`form.fluent_form_3 .ff-btn-submit:not(.ff_btn_no_style){background-color:var(--fluentform-primary)}`, 0,3,1,
   cargado después de esta hoja). Se gana por especificidad (0,5,2) replicando ese selector; no hace falta !important. */
body.tvc-v1 .tvc-contact form.fluent_form_3 .ff-btn-submit:not(.ff_btn_no_style){
  background-color:#000000; color:#FFFFFF; border:0; border-top:4px solid var(--tvc-brand-red); border-radius:0;
  padding:14px 28px; min-height:48px; font:600 16px/1 var(--tvc-font-ui); cursor:pointer; opacity:1; box-shadow:none;
}
body.tvc-v1 .tvc-contact form.fluent_form_3 .ff-btn-submit:not(.ff_btn_no_style):hover{background-color:var(--tvc-ink-900); color:#FFFFFF; opacity:1}
body.tvc-v1 .tvc-contact form.fluent_form_3 .ff-btn-submit:not(.ff_btn_no_style):focus-visible{outline:3px solid var(--tvc-brand-blue); outline-offset:2px}
/* Turnstile (iframe Cloudflare): NO estilizar */

/* ---------- 4. MAPA + REDES (42c9d522): mapa | azul ---------- */
/* 42c9d522 es "full" (sin .e-con-inner): sus hijos (mapa y redes) son hijos directos. Altura del bloque = --tvc-map-h (400px; 300px ≤767). */
body.tvc-v1 .tvc-map{
  --tvc-map-h:340px;
  display:grid!important; grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:var(--tvc-map-h);   /* 50/50 (visita 4) */
  gap:0!important; padding:0!important; width:100%; max-width:none; background:none!important;
}
body.tvc-v1 .tvc-map .elementor-widget-google_maps{grid-column:1; grid-row:1; margin:0!important; width:auto!important; height:var(--tvc-map-h); overflow:hidden}
body.tvc-v1 .tvc-map .elementor-widget-google_maps .elementor-widget-container,
body.tvc-v1 .tvc-map .elementor-widget-google_maps .elementor-custom-embed{height:var(--tvc-map-h); line-height:0}
/* Excepción documentada a "sin reglas sobre iframe": solo altura del mapa */
body.tvc-v1 .tvc-map .elementor-widget-google_maps iframe{height:var(--tvc-map-h)}
/* Bloque azul (contenedor nuevo .tvc-social-block, 42c9d522 es "full": sin .e-con-inner): texto + iconos */
body.tvc-v1 .tvc-map > .tvc-social-block{
  grid-column:2; grid-row:1; align-self:stretch; min-width:0; width:auto; max-width:none; margin:0; box-sizing:border-box;
  display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; gap:24px;
  padding:48px 56px; background:var(--tvc-blue-700);   /* Opción A: #3F6FC0, blanco/#3F6FC0 = 4,95:1 (Addendum 18); #73A1F0 se mantiene en cintas */
}
body.tvc-v1 .tvc-social-block .tvc-social-text{width:auto; max-width:46ch; margin:0 auto; align-self:center; text-align:center}
body.tvc-v1 .tvc-social-block .tvc-social-text .elementor-widget-container{margin:0; padding:0}
body.tvc-v1 .tvc-social-block .tvc-social-text,
body.tvc-v1 .tvc-social-block .tvc-social-text p{color:#FFFFFF; font:600 clamp(1.125rem,1rem + .6vw,1.375rem)/1.4 var(--tvc-font-ui)}
body.tvc-v1 .tvc-social-block .tvc-social-text p{margin:0; text-align:center}
/* ADAPT: el widget de redes (#e26a1f0) trae --align-self:center y text-align:center; dentro del bloque va a la izquierda y sin fondo propio. */
body.tvc-v1 .tvc-social-block .tvc-social{width:auto!important; margin:0!important; padding:0; background:none; align-self:center}
body.tvc-v1 .tvc-social-block .tvc-social .elementor-widget-container{text-align:center}
body.tvc-v1 .tvc-social .elementor-grid{gap:16px; display:flex; justify-content:center}
/* Iconos: fondo rojo #D7493C con símbolo blanco (4,28:1 ≥ 3:1 para iconos). !important: Elementor da a Instagram background-color:#D61111 con `.elementor-repeater-item-<id>.elementor-social-icon`. */
body.tvc-v1 .tvc-social .elementor-social-icon{
  background:var(--tvc-brand-red)!important; border-radius:0!important; width:52px; height:52px;
  display:inline-flex; align-items:center; justify-content:center; font-size:22px;
}
body.tvc-v1 .tvc-social .elementor-social-icon:hover{background:#BE3E32!important}
body.tvc-v1 .tvc-social .elementor-social-icon i{color:#FFFFFF}
body.tvc-v1 .tvc-social .elementor-social-icon svg{fill:#FFFFFF}
body.tvc-v1 .tvc-social .elementor-social-icon:focus-visible{outline:3px solid #000000; outline-offset:3px; background:#BE3E32!important}

/* ---------- 5. FOOTER (4b99f903): negro con filo rojo ---------- */
body.tvc-v1 .tvc-footer{
  background-color:#000000!important; background-image:none!important;
  border-top:6px solid var(--tvc-brand-red);
  display:grid!important; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px!important; align-items:start;   /* columnas alineadas arriba */
  padding:32px max(var(--tvc-gutter), calc((100% - 1140px)/2))!important; max-width:none; min-height:0; /* ADAPT: Elementor da --min-height:330px */
}
/* ADAPT: columnas internas: Elementor les da el padding por defecto de contenedor (10px), gap de 20px entre widgets, anchos 25/28 % y
   --justify-content/--align-items:center (la columna del menú centra su contenido). Se anula todo. */
body.tvc-v1 .tvc-footer > .elementor-element{width:auto!important; max-width:none!important; min-width:0; min-height:0; margin:0!important; padding:0!important; gap:0; align-self:start; justify-content:flex-start; align-items:flex-start}
body.tvc-v1 .tvc-footer .elementor-widget{margin:0}
body.tvc-v1 .tvc-footer .elementor-widget-heading{margin-bottom:8px}
body.tvc-v1 .tvc-footer .elementor-heading-title{color:#FFFFFF; font:700 13px/1.3 var(--tvc-font-ui); letter-spacing:.06em; text-transform:uppercase; margin:0}
/* ADAPT: Elementor fija 12px/500 con `.elementor-545 .elementor-element-<id> .elementor-icon-list-item > .elementor-icon-list-text` (0,5,0); mínimo del plan = 14px. Selector de 0,5,1 sin !important. */
/* Teléfono y correo: `<li><a href><span class="elementor-icon-list-text">`; el selector de Elementor usa `.elementor-icon-list-item > .elementor-icon-list-text` (hijo directo) y no alcanza al span dentro del <a>.
   Selector descendiente (0,5,1) para li, a y span: misma tipografía en dirección, teléfono y correo. */
body.tvc-v1 .tvc-footer .elementor-widget-icon-list .elementor-icon-list-item,
body.tvc-v1 .tvc-footer .elementor-widget-icon-list .elementor-icon-list-item a,
body.tvc-v1 .tvc-footer .elementor-widget-icon-list .elementor-icon-list-item .elementor-icon-list-text{color:#FFFFFF; font:400 15px/1.5 var(--tvc-font-ui); margin:0; padding:0}
body.tvc-v1 .tvc-footer a:focus-visible{outline:3px solid #FFFFFF; outline-offset:2px}
/* Menú del footer (d1a8e39): enlaces blancos sin botón */
body.tvc-v1 .tvc-footer .tvc-nav--footer .menu-container{display:flex; flex-direction:column; align-items:flex-start; gap:0; background:transparent; overflow:visible; padding:0}
body.tvc-v1 .tvc-footer .tvc-nav--footer .menu-item-content{justify-content:flex-start}   /* ADAPT: el <style> original centra el contenido de cada enlace */
body.tvc-v1 .tvc-footer .tvc-nav--footer .menu-item{
  background:transparent; color:#FFFFFF; padding:6px 0; min-height:0; font:600 15px/1.5 var(--tvc-font-ui); border-radius:0;
}
body.tvc-v1 .tvc-footer .tvc-nav--footer .menu-item:hover{background:transparent; text-decoration:underline; text-underline-offset:4px}

/* ---------- 6. RESPONSIVE ---------- */
@media (max-width:1024px){
  body.tvc-v1 .tvc-header .tvc-logo img{height:56px}
  body.tvc-v1 .tvc-contact .tvc-contact__title{padding:64px 40px}
  body.tvc-v1 .tvc-contact .tvc-contact__form{padding:48px 40px}
  body.tvc-v1 .tvc-footer{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767px){
  body.tvc-v1 .tvc-header{min-height:68px; padding-bottom:4px!important}   /* 4px = cinta móvil; contenido = 64; fila 48 (botón) y logo 46 centrados */
  body.tvc-v1 .tvc-header .tvc-logo img{height:46px}
  body.tvc-v1 .tvc-menu[open] .tvc-nav__wrap{top:calc(100% + 10px); left:calc(-1 * var(--tvc-gutter)); right:calc(-1 * var(--tvc-gutter)); min-width:0}
  body.tvc-v1 .tvc-live{padding:8px 0 14px!important; background-image:none!important}
  body.tvc-v1 .tvc-live::after,
  body.tvc-v1 .tvc-header::after,
  body.tvc-v1 .tvc-contact::after{height:4px}
  body.tvc-v1 .tvc-live .tvc-live-caption{max-width:none; margin-top:4px; padding:14px 16px; box-shadow:0 0 0 4px #000000}
  body.tvc-v1 .tvc-live .tvc-live-caption,
  body.tvc-v1 .tvc-live .tvc-live-caption p{font-size:16px}
  body.tvc-v1 .tvc-contact > .e-con-inner,
  body.tvc-v1 .tvc-map{grid-template-columns:1fr}
  body.tvc-v1 .tvc-map{--tvc-map-h:280px; grid-template-rows:var(--tvc-map-h) auto}
  body.tvc-v1 .tvc-contact .tvc-contact__title{grid-column:1; grid-row:1; padding:40px 24px}
  body.tvc-v1 .tvc-contact .tvc-contact__form{grid-column:1; grid-row:2; padding:32px 24px}
  body.tvc-v1 .tvc-map .elementor-widget-google_maps{grid-column:1; grid-row:1}
  body.tvc-v1 .tvc-map > .tvc-social-block{grid-column:1; grid-row:2; align-self:auto; padding:32px 24px}
  body.tvc-v1 .tvc-footer{grid-template-columns:1fr; gap:24px!important; padding:24px 24px!important}
}

/* ---------- 7. MOVIMIENTO REDUCIDO ---------- */
@media (prefers-reduced-motion:reduce){
  body.tvc-v1 .tvc-menu__icon,
  body.tvc-v1 .tvc-menu__icon::before,
  body.tvc-v1 .tvc-menu__icon::after,
  body.tvc-v1 .tvc-nav__link{transition-duration:.01ms!important}
  body.tvc-v1 .tvc-social .elementor-animation-bounce-in:hover{transform:none!important}
}
/* F3TER END */

/* F3TER-MOTION START — opcional; se desactiva borrando este bloque */
@keyframes tvc-drop  { from { opacity:0; transform:translateY(-8px) } to { opacity:1; transform:none } }
@keyframes tvc-draw  { from { transform:scaleX(0) } to { transform:scaleX(1) } }
@keyframes tvc-rise  { from { opacity:0; transform:translateY(24px) } to { opacity:1; transform:none } }

body.tvc-v1 .tvc-menu[open] .tvc-nav__wrap { animation: tvc-drop 180ms ease-out }
/* ADAPT: la animación tvc-draw de .tvc-live::after se sustituye por la cinta animada tvc-ribbon (ver "CINTAS"). */
body.tvc-v1 .tvc-social .elementor-social-icon { transition: transform 150ms ease-out }
body.tvc-v1 .tvc-social .elementor-social-icon:hover,
body.tvc-v1 .tvc-social .elementor-social-icon:focus-visible { transform: translateY(-3px) }

@supports (animation-timeline: view()) {
  body.tvc-v1 .tvc-contact__title,
  body.tvc-v1 .tvc-contact__form,
  body.tvc-v1 .tvc-map .tvc-social,
  body.tvc-v1 .tvc-footer > .elementor-element {
    animation: tvc-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 45%;
  }
  body.tvc-v1 .tvc-contact__title .elementor-heading-title::after {
    transform-origin:left; animation: tvc-draw linear both; animation-timeline: view(); animation-range: entry 20% entry 70%;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.tvc-v1 .tvc-menu[open] .tvc-nav__wrap,
  body.tvc-v1 .tvc-contact__title, body.tvc-v1 .tvc-contact__form,
  body.tvc-v1 .tvc-map .tvc-social, body.tvc-v1 .tvc-footer > .elementor-element,
  body.tvc-v1 .tvc-contact__title .elementor-heading-title::after { animation:none !important }
  /* ADAPT: se añaden :hover/:focus-visible; sin ellos la regla de hover (mayor especificidad) seguiría moviendo el icono con movimiento reducido. */
  body.tvc-v1 .tvc-social .elementor-social-icon,
  body.tvc-v1 .tvc-social .elementor-social-icon:hover,
  body.tvc-v1 .tvc-social .elementor-social-icon:focus-visible { transition:none; transform:none }
}
/* F3TER-MOTION END */

/* CINTAS + LOGO (visita 4) START */
:root{
  /* 2 periodos por tile (tile = 200% de la cinta): cada tramo mide 20% (5 colores) o 25% (4 colores) de la cinta y el bucle es sin costuras */
  --tvc-ribbon-5:linear-gradient(90deg,#D7493C 0 10%,#000000 10% 20%,#FFFFFF 20% 30%,#73A1F0 30% 40%,#78CC84 40% 50%,#D7493C 50% 60%,#000000 60% 70%,#FFFFFF 70% 80%,#73A1F0 80% 90%,#78CC84 90% 100%);
  --tvc-ribbon-4:linear-gradient(90deg,#000000 0 12.5%,#FFFFFF 12.5% 25%,#73A1F0 25% 37.5%,#78CC84 37.5% 50%,#000000 50% 62.5%,#FFFFFF 62.5% 75%,#73A1F0 75% 87.5%,#78CC84 87.5% 100%);
}
/* ADAPT: con background-size:100% el background-position en % no produce desplazamiento (offset = (caja − imagen)·p = 0). Con tile de 200%, 0→100% desplaza exactamente un periodo. Solo background-position (sin layout ni CLS). */
@keyframes tvc-ribbon{from{background-position-x:0} to{background-position-x:100%}}
/* Cinta de contacto→mapa: abajo del contacto, mismos 5 tramos */
body.tvc-v1 .tvc-contact::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:6px; pointer-events:none;
  background-image:var(--tvc-ribbon-5); background-repeat:repeat-x; background-size:200% 100%; background-position-x:0;
  animation:tvc-ribbon 10s linear infinite;
}
/* Bucle continuo de 10 s. Pausa con el cursor o el foco dentro de la sección dueña (WCAG 2.2.2). */
body.tvc-v1 .tvc-header:hover::after, body.tvc-v1 .tvc-header:focus-within::after,
body.tvc-v1 .tvc-live:hover::after, body.tvc-v1 .tvc-live:focus-within::after,
body.tvc-v1 .tvc-contact:hover::after, body.tvc-v1 .tvc-contact:focus-within::after{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){
  body.tvc-v1 .tvc-header::after,
  body.tvc-v1 .tvc-live::after,
  body.tvc-v1 .tvc-contact::after{animation:none!important}
}
/* CINTAS + LOGO END */

/* F4 START — Reproductor: UN SOLO sistema intrinsic-ratio (F4-bis). El componente responde al ANCHO DE SU CONTENEDOR:
   alto = ancho × 9/16 (padding-top 56,25 %). Sin aspect-ratio, sin !important, sin media queries sobre el iframe, sin unidades de viewport ni reglas por dispositivo.
   Sustituye al aspect-ratio de la F4, a los hacks 101–103 % (neutralizados con !important en la F4-B) y al hotfix ≤1024; los <style> pegados de 13c31720/5bebe34 ya no existen. */
body.tvc-v1 .tvc-live .tvc-live-player{width:100%; margin:0; padding:0}
body.tvc-v1 .tvc-live .tv-wrapper{
  position:relative; width:min(100%, var(--tvc-player-max)); max-width:900px; margin-inline:auto; padding:0; background:#000000; box-sizing:border-box;
}
body.tvc-v1 .tvc-live .tv-player{
  position:relative; width:100%; height:0; padding:0 0 56.25% 0; margin:0; overflow:hidden; background:#000000; box-shadow:0 0 0 8px #000000;
}
body.tvc-v1 .tvc-live .tv-player iframe{
  position:absolute; display:block; inset:0; width:100%; height:100%; margin:0; padding:0; border:0;
}
@media (max-width:767px){
  body.tvc-v1 .tvc-live{padding-left:0!important; padding-right:0!important}   /* ya definido en el bloque móvil de F3-ter; se repite aquí para que el reproductor sea a sangre sin depender de aquel */
  body.tvc-v1 .tvc-live .tv-wrapper{width:100%; max-width:none}
  body.tvc-v1 .tvc-live .tv-player{box-shadow:0 0 0 4px #000000}
}
/* F4 END */

/* F5 START — Formulario, foco, áreas táctiles y movimiento reducido (todo bajo body.tvc-v1) */
/* Errores de Fluent Forms: texto #000 con barra izquierda #D7493C (un texto rojo sobre blanco daría 4,28:1). Selectores con .ff-el-is-error para vencer el font-size:12px de Fluent (0,3,0). */
body.tvc-v1 .tvc-contact .fluentform .text-danger,
body.tvc-v1 .tvc-contact .fluentform .ff-el-is-error .text-danger,
body.tvc-v1 .tvc-contact .fluentform .error{
  color:#000000; border-left:4px solid var(--tvc-brand-red); padding-left:8px; margin-top:4px;
  font:400 14px/1.4 var(--tvc-font-ui);
}
/* Campo inválido: borde de 2px #D7493C (4,28:1 sobre blanco, ≥3:1 para componentes). */
body.tvc-v1 .tvc-contact .ff-el-is-error .ff-el-form-control{border-color:var(--tvc-brand-red); border-width:2px}
/* Éxito: fondo #F4F6F9, barra izquierda #78CC84 y texto #000. */
body.tvc-v1 .tvc-contact .ff-message-success{
  background:var(--tvc-surface-100); border:0; border-left:4px solid var(--tvc-accent-green); box-shadow:none; color:#000000; padding:15px 16px;
}
body.tvc-v1 .tvc-contact .ff-message-success p{color:#000000}
/* Placeholder: #5F6B7A (5,43:1 sobre blanco); Fluent usa #868e96 (3,4:1). Reglas separadas por prefijo de navegador. */
body.tvc-v1 .tvc-contact .ff-el-form-control::placeholder{color:#5F6B7A; opacity:1}
body.tvc-v1 .tvc-contact .ff-el-form-control::-moz-placeholder{color:#5F6B7A; opacity:1}

/* Foco visible (≥3px y ≥3:1 frente al fondo adyacente). */
/* Panel del menú: contorno blanco interior (el box-shadow inset desaparece en modo de alto contraste; el outline no). */
body.tvc-v1 .tvc-nav__link:focus-visible{outline:3px solid #FFFFFF; outline-offset:-3px; box-shadow:none}
/* Enviar: el contorno #73A1F0 daba 2,6:1 sobre el fondo blanco que lo rodea; el negro da 21:1 (el hueco de 2px lo separa del botón negro). */
body.tvc-v1 .tvc-contact form.fluent_form_3 .ff-btn-submit:not(.ff_btn_no_style):focus-visible{outline:3px solid #000000; outline-offset:2px}
/* Áreas táctiles: teléfono y correo del footer (el <a> medía 22,5px de alto). */
body.tvc-v1 .tvc-footer .elementor-widget-icon-list .elementor-icon-list-item a{display:inline-flex; align-items:center; min-height:24px}

/* Movimiento reducido: además de las cintas y el ☰→X (reglas anteriores), se neutraliza el zoomIn de entrada de Elementor
   (logo, "Contactanos", formulario, mapa): `.animated` + `.zoomIn`. Documentado: es una animación propia de Elementor aplicada por JS. */
@media (prefers-reduced-motion:reduce){
  body.tvc-v1 .animated,
  body.tvc-v1 [class*="zoomIn"]{animation:none!important}
}
/* F5 END */

/* F6 START — Páginas interiores (Defensoría 100 y Nosotros 121); todo bajo body.tvc-v1 */
/* Columnas vacías del header de cada página (mismos roles que 24746472/aa2d31d/28ec9bce en la portada). */
body.tvc-v1 .tvc-header > .elementor-element-23dd25a9,
body.tvc-v1 .tvc-header > .elementor-element-716d1a18,
body.tvc-v1 .tvc-header > .elementor-element-3114d0a0,
body.tvc-v1 .tvc-header > .elementor-element-317789da,
body.tvc-v1 .tvc-header > .elementor-element-42bb0227,
body.tvc-v1 .tvc-header > .elementor-element-602da4ff{display:none}
/* Redes del footer (se quedan en el footer): mismos iconos rojos/blancos de la portada, alineados a la izquierda bajo el menú. */
body.tvc-v1 .tvc-footer .tvc-social{align-self:flex-start; margin-top:12px}
body.tvc-v1 .tvc-footer .tvc-social .elementor-grid{justify-content:flex-start}
body.tvc-v1 .tvc-footer .tvc-social .elementor-widget-container{text-align:left}

/* Título de página: Spline Sans 700 negro (Elementor fija #141414/#292929 con 4 clases; se gana con .elementor-widget-heading) + cinta animada de 5 tramos debajo. */
body.tvc-v1 .tvc-page-title{position:relative; padding-bottom:18px}
body.tvc-v1 .tvc-page-title .elementor-widget-heading .elementor-heading-title{font:700 clamp(2rem,1.4rem + 2vw,3rem)/1.15 var(--tvc-font-ui); color:#000000}
body.tvc-v1 .tvc-page-title::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:6px; pointer-events:none;
  background-image:var(--tvc-ribbon-5); background-repeat:repeat-x; background-size:200% 100%; background-position-x:0;
  animation:tvc-ribbon 10s linear infinite;
}
body.tvc-v1 .tvc-page-title:hover::after, body.tvc-v1 .tvc-page-title:focus-within::after{animation-play-state:paused}
@media (max-width:767px){ body.tvc-v1 .tvc-page-title::after{height:4px} }
@media (prefers-reduced-motion:reduce){ body.tvc-v1 .tvc-page-title::after{animation:none!important} }

/* Defensoría (.elementor-100): acordeón anidado de Elementor con radio 0, borde 1px #5F6B7A, título 600 y foco visible; cuerpo 16px/1.6. */
body.tvc-v1 .elementor-100 .e-n-accordion .e-n-accordion-item{border-radius:0; border:1px solid #5F6B7A}
body.tvc-v1 .elementor-100 .e-n-accordion .e-n-accordion-item-title,
body.tvc-v1 .elementor-100 .e-n-accordion .e-n-accordion-item-title-text{font-weight:600; font-size:16px}
body.tvc-v1 .elementor-100 .e-n-accordion .e-n-accordion-item-title:focus-visible{outline:3px solid #000000; outline-offset:-3px}
body.tvc-v1 .elementor-100 .e-n-accordion-item .elementor-widget-text-editor,
body.tvc-v1 .elementor-100 .e-n-accordion-item .elementor-widget-text-editor p,
body.tvc-v1 .elementor-100 .e-n-accordion-item .elementor-widget-text-editor li{font-family:var(--tvc-font-text); font-size:16px; line-height:1.6}
body.tvc-v1 .elementor-100 .elementor-element-2cb1518 .elementor-heading-title{font-size:16px}   /* Elementor lo fija en 12px (mínimo del plan: 14px) */

/* Nosotros (.elementor-121): texto con marcado Divi; Elementor fija line-height:1px y p{margin-bottom:1px} (0,3,0/0,3,1). */
body.tvc-v1 .elementor-121 .elementor-widget-text-editor{font-family:var(--tvc-font-text); font-size:16px; line-height:1.6}
body.tvc-v1 .elementor-121 .elementor-widget-text-editor p{margin:0 0 1em; line-height:1.6}

/* Formulario 4 (contenedor .tvc-form): mismos estilos que el 3. Los <style> pegados de la página (.ff-default .ff-el-form-control{background:#eee…}) y el de Fluent
   (`form.fluent_form_4 .ff-btn-submit:not(.ff_btn_no_style)`) se vencen por especificidad. */
body.tvc-v1 .tvc-form .ff-el-input--label label{color:#000000; font:600 16px/1.3 var(--tvc-font-ui)}
body.tvc-v1 .tvc-form .ff-el-form-control{
  border:1px solid var(--tvc-border-500); border-radius:0; background:#FFFFFF; color:#000000;
  min-height:48px; font:400 16px/1.4 var(--tvc-font-text);
}
body.tvc-v1 .tvc-form .ff-el-form-control:focus{border-color:#000000; outline:3px solid #000000; outline-offset:0; box-shadow:none}
body.tvc-v1 .tvc-form .ff-el-form-control::placeholder{color:#5F6B7A; opacity:1}
body.tvc-v1 .tvc-form .ff-el-form-control::-moz-placeholder{color:#5F6B7A; opacity:1}
body.tvc-v1 .tvc-form .ff-el-is-error .ff-el-form-control{border-color:var(--tvc-brand-red); border-width:2px}
body.tvc-v1 .tvc-form .fluentform .text-danger,
body.tvc-v1 .tvc-form .fluentform .ff-el-is-error .text-danger,
body.tvc-v1 .tvc-form .fluentform .error{color:#000000; border-left:4px solid var(--tvc-brand-red); padding-left:8px; margin-top:4px; font:400 14px/1.4 var(--tvc-font-ui)}
body.tvc-v1 .tvc-form .ff-message-success{background:var(--tvc-surface-100); border:0; border-left:4px solid var(--tvc-accent-green); box-shadow:none; color:#000000; padding:15px 16px}
body.tvc-v1 .tvc-form .ff-message-success p{color:#000000}
body.tvc-v1 .tvc-form form.fluent_form_4 .ff-btn-submit:not(.ff_btn_no_style){
  background-color:#000000; color:#FFFFFF; border:0; border-top:4px solid var(--tvc-brand-red); border-radius:0;
  padding:14px 28px; min-height:48px; font:600 16px/1 var(--tvc-font-ui); cursor:pointer; opacity:1; box-shadow:none;
}
body.tvc-v1 .tvc-form form.fluent_form_4 .ff-btn-submit:not(.ff_btn_no_style):hover{background-color:var(--tvc-ink-900); color:#FFFFFF; opacity:1}
body.tvc-v1 .tvc-form form.fluent_form_4 .ff-btn-submit:not(.ff_btn_no_style):focus-visible{outline:3px solid #000000; outline-offset:2px}
/* F6 END */