/* =====================================================================
 * VIAJACONTUHIJO 7.0 · RUSHMORE
 * Capa de presentacion. Una sola regla de oficio: un color estructural
 * (azul marino), un color de accion (naranja del logotipo) y nada mas.
 * Ni una linea toca la geometria interna de Marga, sus formularios, sus
 * precios ni su estado. Todo lo de aqui es color, tipografia y foco.
 * ================================================================== */

/* La capa STAR declara estos tokens en `body`, que gana a `:root`. Se vuelven
 * a declarar aqui para que toda la marca lea la misma paleta. */
body.vcth-star-safe{
  --vcth-orange:var(--vcth-accent,#f5810e);
  --vcth-deep:#06182e;
  --vcth-navy:#082d59;
  --vcth-blue:#075aa8;
  --vcth-sky:#159fe3;
  --vcth-cream:var(--vcth-accent-soft,#fff2e3);
  --vcth-ring:0 0 0 3px rgba(var(--vcth-accent-rgb,245,129,14),.42);
  --vcth-gradient:linear-gradient(118deg,#06182e,#075aa8 58%,#159fe3);
}

/* ---------------------------------------------------------------------
 * 1 · JERARQUIA DE COLOR
 * El antetitulo deja de competir con el boton. El naranja pasa a ser,
 * en exclusiva, el color de "esto se pulsa".
 * ------------------------------------------------------------------ */
/* Solo color y un guion de acento. No se toca `display`: cambiar el modo de
 * caja de un elemento que ya vive dentro de rejillas heredadas es la via
 * rapida a un descuadre en produccion. */
body.vcth-star-safe .vmon-kicker,
body.vcth-star-safe .vctf-kicker{
  color:var(--vcth-navy,#082d59)!important;
}
body.vcth-star-safe .vmon-kicker:before{
  content:"";display:inline-block;vertical-align:middle;
  width:1.5em;height:2px;margin-right:.55em;border-radius:2px;
  background:var(--vcth-accent,#f5810e);
}
/* Sobre fondo oscuro el antetitulo necesita el azul claro, no el marino. */
body.vcth-star-safe .vmon-hero .vmon-kicker,
body.vcth-star-safe .vcth-star-compass .vmon-kicker,
body.vcth-star-safe .vmon-authority .vmon-kicker,
body.vcth-star-safe .vmon-footer .vmon-kicker,
body.vcth-star-safe .vcth-action-band .vmon-kicker{
  color:#8fd8f7!important;
}

/* ---------------------------------------------------------------------
 * 2 · ACCION · naranja solido, sombra corta, hover mas oscuro.
 * Un degradado azul sobre un hero azul no se ve. Esto si.
 * ------------------------------------------------------------------ */
body.vcth-star-safe .vmon-button,
body.vcth-star-safe .vmon-cta,
body.vcth-star-safe .vctf-footer__primary,
body.vcth-star-safe .vmon-age-cta,
body.vcth-star-safe .vmon-nav__mobile-cta,
body.vcth-star-safe .vmon-auto-cta__button{
  background:var(--vcth-accent,#f5810e)!important;
  background-image:none!important;
  color:#fff!important;
  border:0!important;
  font-weight:900;
  letter-spacing:.005em;
  box-shadow:0 10px 26px rgba(var(--vcth-accent-rgb,245,129,14),.30);
  transition:background .18s ease,transform .18s ease,box-shadow .18s ease;
}
body.vcth-star-safe .vmon-button:hover,
body.vcth-star-safe .vmon-cta:hover,
body.vcth-star-safe .vctf-footer__primary:hover,
body.vcth-star-safe .vmon-age-cta:hover,
body.vcth-star-safe .vmon-nav__mobile-cta:hover,
body.vcth-star-safe .vmon-auto-cta__button:hover{
  background:var(--vcth-accent-dark,#c96405)!important;
  transform:translateY(-2px);
  box-shadow:0 16px 34px rgba(var(--vcth-accent-rgb,245,129,14),.38);
}
/* Accion secundaria: el azul se queda, pero como contorno. */
/* La baseline declara el CTA del menu movil con un `#vmon-nav` delante, asi
 * que una regla de clase pierde por especificidad. Se iguala el terreno. */
body.vcth-star-safe #vmon-nav .vmon-nav__mobile-cta{
  background:var(--vcth-accent,#f5810e)!important;
  background-image:none!important;
  border-color:transparent!important;
  color:#fff!important;
}
body.vcth-star-safe #vmon-nav .vmon-nav__mobile-cta:hover{
  background:var(--vcth-accent-dark,#c96405)!important;
}
body.vcth-star-safe #vmon-nav .vmon-nav__mobile-help{
  border-color:rgba(8,45,89,.25)!important;
  color:var(--vcth-navy,#082d59)!important;
}
/* Barra de acento de las tarjetas de argumentos: seguia en el azul de la
 * marca hermana. Tambien lleva `!important` en origen. */
body.vcth-star-safe .vctf-proof .vctf-proof-card:before{
  background:var(--vcth-accent,#f5810e)!important;
  opacity:.9!important;
}

body.vcth-star-safe .vmon-button--light,
body.vcth-star-safe .vmon-header__help{
  background:transparent!important;
  color:var(--vcth-navy,#082d59)!important;
  border:1.5px solid rgba(8,45,89,.25)!important;
  font-weight:850;
}
body.vcth-star-safe .vmon-header__help:hover{
  border-color:var(--vcth-accent,#f5810e)!important;
  color:var(--vcth-accent-dark,#c96405)!important;
}

/* ---------------------------------------------------------------------
 * 3 · FOCO VISIBLE · accesibilidad real, no un outline del navegador.
 * ------------------------------------------------------------------ */
body.vcth-star-safe a:focus-visible,
body.vcth-star-safe button:focus-visible,
body.vcth-star-safe summary:focus-visible,
body.vcth-star-safe [tabindex]:focus-visible{
  outline:2px solid var(--vcth-accent,#f5810e);
  outline-offset:3px;
  border-radius:6px;
}

/* ---------------------------------------------------------------------
 * 4 · HERO · el titular respira y el acento es naranja.
 * ------------------------------------------------------------------ */
body.vcth-star-safe .vmon-hero__overlay{
  background:linear-gradient(104deg,rgba(6,24,46,.90) 0%,rgba(8,45,89,.74) 46%,rgba(6,24,46,.30) 100%)!important;
}
body.vcth-star-safe .vmon-hero-title--gradient em,
body.vcth-star-safe .vmon-hero-title--solid em{
  color:var(--vcth-accent,#f5810e)!important;
  background:none!important;
  -webkit-text-fill-color:var(--vcth-accent,#f5810e)!important;
  font-style:normal;
}
body.vcth-star-safe .vmon-hero__lead{
  max-width:44ch;
  color:rgba(255,255,255,.92);
}
body.vcth-star-safe .vmon-hero-poster{
  border-left:4px solid var(--vcth-accent,#f5810e);
}
body.vcth-star-safe .vmon-hero-poster__eyebrow{color:var(--vcth-accent,#f5810e)}

/* ---------------------------------------------------------------------
 * 5 · SECCIONES · un ritmo, no doce.
 * ------------------------------------------------------------------ */
body.vcth-star-safe .vmon-section-head h2,
body.vcth-star-safe .vcth-star-compass header h2{text-wrap:balance}
body.vcth-star-safe .vmon-section-head>p{max-width:56ch}
body.vcth-star-safe .vmon-steps>a i{color:var(--vcth-accent,#f5810e)}
body.vcth-star-safe .vmon-step-cta{color:var(--vcth-accent-dark,#c96405)}
body.vcth-star-safe .vctf-proof-card__arrow{color:var(--vcth-accent,#f5810e)}
body.vcth-star-safe .vctf-proof-card:hover{box-shadow:0 26px 58px rgba(8,45,89,.16)}
body.vcth-star-safe .cth-vctf-trustindex__head h2{color:var(--vcth-deep,#06182e)}
body.vcth-star-safe .vmon-faq__item summary span{color:var(--vcth-accent,#f5810e)}

/* El compas de tres atajos: la etiqueta pequena en naranja, no en cian. */
body.vcth-star-safe .vcth-star-compass nav small{color:var(--vcth-accent,#f5810e)}
body.vcth-star-safe .vcth-star-compass nav a:hover small{color:var(--vcth-accent-dark,#c96405)}
body.vcth-star-safe .vcth-star-compass nav span{color:rgba(255,255,255,.82)}
body.vcth-star-safe .vcth-star-compass nav a:hover span{color:var(--vcth-navy,#082d59)}

/* ---------------------------------------------------------------------
 * 6 · BUSCADOR · el filtro que Viajacontuhijo no usa desaparece del
 * layout, pero sigue existiendo en el DOM para Marga.
 * ------------------------------------------------------------------ */
.vcth-filter--off,
[data-vcth-filter="off"]{
  display:none!important;
  visibility:hidden!important;
  position:absolute!important;
  width:1px!important;height:1px!important;
  overflow:hidden!important;
  clip:rect(0 0 0 0)!important;
  pointer-events:none!important;
}

/* ---------------------------------------------------------------------
 * 7 · MOVIL · siete de cada diez visitas entran por aqui.
 * Objetivos de pulsacion de 44px, titulares que caben y cero scroll
 * horizontal. Sin tocar la maquetacion de las fichas de Marga.
 * ------------------------------------------------------------------ */
@media(max-width:900px){
  /* Nada de overflow-x:hidden en body: rompe la cabecera position:sticky. */
  body.vcth-star-safe .vmon-button,
  body.vcth-star-safe .vmon-cta,
  body.vcth-star-safe .vmon-nav__mobile-cta,
  body.vcth-star-safe .vmon-nav__mobile-help,
  body.vcth-star-safe .vmon-auto-cta__button{
    min-height:48px;
    display:inline-flex;align-items:center;justify-content:center;
    padding-inline:20px;
  }
  body.vcth-star-safe .vmon-menu-button{min-width:48px;min-height:48px}
  body.vcth-star-safe #vmon-nav>ul>li>a{min-height:46px;display:flex;align-items:center}
  body.vcth-star-safe .vmon-hero__lead{max-width:none;font-size:1.02rem;line-height:1.55}
  body.vcth-star-safe .vmon-section-head>p{max-width:none}
}
@media(max-width:640px){
  body.vcth-star-safe .vmon-hero__copy .vmon-button{width:100%;text-align:center}
  body.vcth-star-safe .vmon-hero-poster{margin-top:26px}
}

/* ---------------------------------------------------------------------
 * 8 · IMPRESION Y PREFERENCIAS · detalles que cuestan poco y se notan.
 * ------------------------------------------------------------------ */
@media(prefers-reduced-motion:reduce){
  body.vcth-star-safe *,body.vcth-star-safe *:before,body.vcth-star-safe *:after{
    animation-duration:.001ms!important;transition-duration:.001ms!important;
  }
  body.vcth-star-safe .vmon-button:hover,body.vcth-star-safe .vmon-cta:hover{transform:none}
}
@media print{
  body.vcth-star-safe .vmon-header,
  body.vcth-star-safe .vcth-action-band,
  body.vcth-star-safe .cth-vctf-trustindex{display:none!important}
}


/* ---------------------------------------------------------------------
 * 9 · COPY LEGAL COMPACTO EN FORMULARIOS
 * El script de CORE NEXT colapsa el texto legal largo apoyandose en el
 * atributo `hidden`, cuya regla de navegador es la mas debil que existe. En
 * las rutas de formulario hay reglas `display:block!important` sobre las
 * columnas heredadas que la ganan, asi que el colapso tiene que declararse
 * aqui de forma explicita. Los controles obligatorios, el captcha y el envio
 * no se tocan: solo se colapsa el parrafo explicativo.
 * ------------------------------------------------------------------ */
.cth-experience-pack .cth-form-legal-toggle{
  width:100%;box-sizing:border-box;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin:10px 0 12px;padding:12px 14px;
  border:1px solid rgba(8,45,89,.18);border-radius:11px;
  background:#fff;color:var(--vcth-deep,#06182e);
  font:inherit;font-size:.82rem;font-weight:760;line-height:1.25;text-align:left;
  cursor:pointer;
}
.cth-experience-pack .cth-form-legal-toggle:hover,
.cth-experience-pack .cth-form-legal-toggle:focus-visible{
  border-color:var(--vcth-accent,#f5810e);outline:none;
}
.cth-experience-pack .cth-form-legal-toggle b{
  flex:0 0 auto;color:var(--vcth-accent,#f5810e);
  font-size:1.22rem;line-height:1;font-weight:500;transition:transform .18s ease;
}
.cth-experience-pack .cth-form-legal-toggle.is-open b{transform:rotate(45deg)}
.cth-experience-pack .cth-form-legal-detail{
  width:100%!important;max-width:100%!important;min-width:0!important;
  box-sizing:border-box!important;
  overflow-wrap:anywhere;word-break:normal;
  font-size:.78rem!important;line-height:1.48!important;
}
/* Doble selector para batir a `display:block!important` de las reglas de
 * columna heredadas en /contacto/ y en el contacto de ficha. */
.cth-experience-pack .cth-form-legal-detail[hidden],
.cth-experience-pack [hidden].cth-form-legal-detail,
body .cth-experience-pack .cth-form-legal-detail[hidden]{display:none!important}
.cth-experience-pack .cth-form-legal-generated{margin:0!important;padding:0!important}
@media(max-width:640px){
  .cth-experience-pack .cth-form-legal-toggle{margin:8px 0 10px;padding:11px 12px;font-size:.79rem;border-radius:10px}
  .cth-experience-pack .cth-form-legal-detail{font-size:.74rem!important;line-height:1.45!important}
}

/* ---------------------------------------------------------------------
 * 10 · BANDA DE CONFIANZA Y PARTNER DEL PIE
 * Van aqui, no en un estilo en linea condicional: el pie se pinta en todas
 * las rutas, incluidas las de formulario, y un bloque sin CSS es texto negro
 * ilegible sobre el degradado oscuro.
 * ------------------------------------------------------------------ */
.vcth-trust-band{
  padding:clamp(26px,3.4vw,42px) 0;
  background:var(--vcth-accent-soft,#fff2e3);
  border-block:1px solid rgba(var(--vcth-accent-rgb,245,129,14),.22);
}
.vcth-trust-band ul{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(18px,2.6vw,34px);margin:0;padding:0;list-style:none;
}
.vcth-trust-band li{display:grid;gap:5px;min-width:0}
.vcth-trust-band strong{
  font-size:.76rem;font-weight:950;letter-spacing:.1em;text-transform:uppercase;
  color:var(--vcth-accent-dark,#c96405);
}
.vcth-trust-band span{color:var(--vcth-deep,#06182e);font-size:.95rem;line-height:1.5}
@media(max-width:900px){.vcth-trust-band ul{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.vcth-trust-band ul{grid-template-columns:1fr;gap:16px}}

.vcth-footer-partners{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;margin:14px 0 6px}
.vcth-footer-partners span{font-size:.68rem;font-weight:900;letter-spacing:.1em;color:rgba(255,255,255,.62)}
.vcth-footer-partners strong{font-size:1.02rem;font-weight:900;color:#fff}