/* carmenbarrabes.com — hoja única. Valores medidos en la web viva (Elementor) el 20-sep-2026.
   Tokens: magenta #F2358D (logo, botones, enlaces, H2 de guías) · naranja #FF914D (acentos, hover,
   separadores, cajas de info) · azul marino #424C6B (titulares de sección, H3) · texto #333. */

@font-face{font-family:Alice;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/alice-400.woff2) format("woff2")}
@font-face{font-family:Lato;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/lato-400.woff2) format("woff2")}
@font-face{font-family:Lato;font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/lato-700.woff2) format("woff2")}
@font-face{font-family:Lato;font-style:normal;font-weight:900;font-display:swap;src:url(../fonts/lato-900.woff2) format("woff2")}
@font-face{font-family:Roboto;font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/roboto-500.woff2) format("woff2")}
@font-face{font-family:Montserrat;font-style:normal;font-weight:400 500;font-display:swap;src:url(../fonts/montserrat-400-500.woff2) format("woff2")}   /* solo la usan las tablas (Essential Addons); en la viva la carga el script de consentimiento de Google (400 y 500) y así se ve, no en la fuente por defecto */

:root{
  --magenta:#F2358D;--naranja:#FF914D;--marino:#424C6B;--texto:#333;--gris:#54595F;--gris-claro:#bfbfbf;
  --rosa-suave:rgba(242,53,141,.14);--titulo:Alice,Georgia,serif;--cuerpo:Lato,sans-serif;--boton:Roboto,Arial,sans-serif;
  --ancho:1140px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font:400 18px/1.5 var(--cuerpo);color:var(--texto);background:#fff;overflow-x:hidden}
img{max-width:100%;height:auto;display:inline-block;vertical-align:middle}
button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.5;margin:0}   /* el reset del tema Hello de la viva: sin él los botones del selector de /viajes/ medían 35 y no 39 (line-height normal) */
/* Los banners de afiliado traen el ancho puesto a pelo (728px): sin esto desbordan en
   móvil. El tema de la web viva lo hacía igual. */
iframe,video,table{max-width:100%}
/* Las páginas legales imprimen URLs enteras: sin esto se salen de la pantalla en móvil.
   En los títulos NO: partía «IMPRESCINDIBLES» por la mitad en los rótulos de los hubs. */
/* como la viva: una palabra larga desborda su caja, no se parte («INFORMACIÓN» bajo los iconos a 768 va en una línea) */
body{overflow-wrap:normal}
a{color:var(--magenta);text-decoration:none}
a:hover,a:active{color:#336}
h1,h2,h3,h4,h5{font-family:var(--titulo);margin:0 0 .5rem;line-height:1.2}
h1{font-size:51px;font-weight:400}
h2{font-size:35px;font-weight:900}
h3{font-size:30px;font-weight:700}
h4{font-size:25px;font-weight:700}
p{margin:0 0 1rem}
ul,ol{margin:0 0 1rem;padding-left:40px}
b,strong{font-weight:700}
.contenedor{max-width:var(--ancho);margin:0 auto;padding:0 10px}
.centrado{text-align:center}
.oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Botones (medidos: 15px 30px, radio 11px, borde 3px blanco, Roboto 500 16px) ---------- */
/* sin text-transform: la web viva no transforma, el texto ya viene como toca. Forzarlo
   ponía en mayúsculas los que van en minúscula, como el «Enviar» del formulario. */
.btn{display:inline-block;background:var(--magenta);color:#fff;font:500 16px/1 var(--boton);
  padding:15px 30px;border:3px solid #fff;border-radius:11px;transition:all .3s;letter-spacing:0}
.btn:hover,.btn:focus{background:#fff;color:var(--naranja);border-color:var(--naranja);transform:scale(1.06)}
/* los botones rosas copiados de Elementor llevan el fondo en línea (style=) o en una regla .e-xxx .btn de la página, que
   pisaban el fondo blanco del hover. Solo enlaces: los <button> de los formularios (.formulario, .cbSugBox) tienen su
   hover propio (#d92b79), y YouTube/Instagram su degradado. */
a.btn:not(.btn-yt):not(.btn-ig):hover,a.btn:not(.btn-yt):not(.btn-ig):focus{background-color:#fff!important}
.btn-yt,.btn-ig{border-radius:4px;display:inline-flex;align-items:center;gap:6px}
.btn-yt{background:red}.btn-ig{background:#FF00DC}
.col>.aire:has(>.btn-yt,>.btn-ig){max-width:none}   /* el contenedor de Instagram venía de Elementor al 90 % y descentraba el botón respecto al de YouTube (12-oct) */
.btn-yt:hover,.btn-yt:focus{background:linear-gradient(180deg,#FF0000 0%,#B4002D 100%);color:#fff;border-color:#fff}
.btn-ig:hover,.btn-ig:focus{background:linear-gradient(180deg,#BF00FF 0%,#f2295b 100%);color:#fff;border-color:#fff}
.btn svg{width:1em;height:1em;fill:currentColor}

/* ---------- Cabecera (pegajosa, 93px de alto; a 1440 la viva va en una fila) ---------- */
.cabecera{position:sticky;top:0;z-index:99;background:#fff;border-bottom:1px solid #d3d3d3}
/* Reparto medido en la viva (1366 y 1920 px): columnas del 17,66 / 58,2 / 24,14 %; el logo
   ocupa el 62 % de la suya, centrado; el menú va centrado con 6 px entre entradas; en la
   tercera van la lupa (12,7 %) y cinco casillas iguales para las redes (76,6 %), centradas. */
.cabecera .barra{display:flex;align-items:center;padding:0;min-height:93px}
.logo{flex:0 0 17.66%;text-align:center}
.logo img{width:62%;height:auto;vertical-align:middle}
.menu-toggle{display:none;background:none;border:0;padding:8px;cursor:pointer;color:var(--magenta)}
.menu-toggle span{display:block;width:26px;height:3px;background:currentColor;margin:5px 0;border-radius:2px}
.menu{flex:0 0 58.199%;display:flex;justify-content:center}
.menu ul{list-style:none;margin:0;padding:0}
.menu>ul{display:flex;gap:6px}
.menu li{position:relative}
.menu>ul>li>a{display:block;font:700 21px/20px var(--cuerpo);text-transform:uppercase;color:var(--magenta);padding:36px 20px;position:relative;white-space:nowrap}
.menu>ul>li>a::after{content:"";position:absolute;left:20px;right:20px;bottom:24px;height:3px;background:var(--naranja);transform:scaleX(0);transition:transform .3s}
.menu>ul>li>a:hover{color:var(--naranja)}
.menu>ul>li>a:hover::after{transform:scaleX(1)}
.menu>ul>li.activo>a::after{background:var(--magenta);transform:scaleX(1)}
.menu li.con-hijos>a::before{content:"";display:inline-block;width:8px;height:8px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg);margin:0 0 4px 8px;float:right;position:relative;top:4px}
/* la flecha de la viva es un triángulo relleno (caret) de 11 px, con 10 px a cada lado: 31 px tras el texto */
.menu>ul>li.con-hijos>a::before{width:0;height:0;border:solid transparent;border-width:7px 5.5px 0;border-top-color:currentColor;transform:none;margin:7px 10px 0;top:0;float:right;position:static}   /* con .con-hijos: si no, pierde contra la regla general; flotado a la derecha para ir TRAS el texto */
.menu ul ul{position:absolute;top:100%;left:0;min-width:200px;background:#fff;box-shadow:0 3px 20px rgba(0,0,0,.12);display:none;z-index:5}
.menu ul ul ul{top:0;left:100%}
.menu ul ul a{display:block;font:700 15px/1.3 var(--cuerpo);color:var(--magenta);padding:13px 20px;text-transform:uppercase;border-bottom:1px solid #f0f0f0}
.menu ul ul a:hover{color:var(--naranja);background:#fff}
.menu li:hover>ul{display:block}
.abre-sub{display:none}
.iconos{display:grid;grid-template-columns:12.737% repeat(5,calc(76.578% / 5));justify-content:center;align-items:center;flex:0 0 24.141%;min-width:0;margin:0}   /* min-width:0: si no, el mínimo de contenido (5 × 64) la ensancha y desborda la página */
.iconos a,.buscar-btn{display:flex;align-items:center;justify-content:center;justify-self:center;width:64px;height:64px;color:var(--naranja);background:none;border:0;cursor:pointer;padding:0}
.iconos svg{width:23px;height:23px;fill:currentColor}
.buscar-btn{color:var(--magenta);width:36px}
.buscar-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:3.2;stroke-linecap:round}
.iconos a:hover{color:var(--magenta)}
#buscador{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:999;justify-content:center;align-items:center}
#buscador.abierto{display:flex}
#buscador .caja{background:#fff;padding:30px;width:60%;border-radius:8px;position:relative}
#buscador input{width:100%;padding:12px;font-size:18px;border:2px solid var(--magenta);border-radius:4px;outline:none;font-family:var(--cuerpo)}
.buscar-cerrar{position:absolute;top:10px;right:15px;background:none;border:0;font-size:20px;cursor:pointer;color:#333}
.resultados{padding:40px 10px 60px}.resultados h1{font-size:28px;margin:0 0 30px}.resultados h1 span{color:var(--magenta)}
.resultados ul{list-style:none;margin:0;padding:0}.resultados li{display:flex;gap:20px;align-items:flex-start;padding:20px 0;border-bottom:1px solid #eee}
.resultados li img{width:200px;height:130px;object-fit:cover;border-radius:6px;flex:none}.resultados h2{font-size:20px;margin:0 0 8px}.resultados h2 a{color:inherit;text-decoration:none}.resultados h2 a:hover{color:var(--magenta)}.resultados li p{margin:0;color:#555}
@media(max-width:767px){.resultados li{flex-direction:column;gap:10px}.resultados li img{width:100%;height:auto;aspect-ratio:3/2}}

@media(max-width:1350px){.menu>ul>li>a{font-size:18px;padding:36px 14px}}   /* la viva parte el menú en dos filas a 1280: aquí cabe en una */
@media(max-width:1024px){
  /* tablet medida en la viva a 768: relleno 30/20, logo en una columna del 30 % (foto al
     67 %), hamburguesa de 45 px al final de la columna del 67 %, y debajo la lupa y las
     redes en una columna del 30 % (157 px de alto en total) */
  .cabecera .barra{flex-wrap:wrap;padding:30px 20px;min-height:0}
  .logo{order:1;flex:0 0 30%}.logo img{width:67%}
  .menu-toggle{display:block;order:2;margin:0 3% 0 calc(67% - 45px);width:45px;height:45px;padding:3px 8px}   /* llena la fila: así las redes bajan a la segunda */
  .menu-toggle span{margin:5px auto}
  .iconos{order:3;flex:0 0 30%}
  .iconos a,.buscar-btn{width:48px;height:48px}.iconos svg{width:17px;height:17px}
  .menu{order:4;flex:1 0 100%;display:none;justify-content:flex-start;border-top:1px solid #eee}
  .menu.abierto{display:block}
  .menu>ul{display:block}
  .menu>ul>li>a{font-size:13px;padding:12px 10px;line-height:1.4}
  /* en móvil la única flecha es la del botón que despliega: la del enlace sobraba y
     salían dos por entrada */
  .menu>ul>li>a::after,.menu li.con-hijos>a::before{display:none}
  /* En móvil el submenú lo abre la flecha, no el enlace: si no, las páginas que tienen
     hijos (China, Europa, Austria...) no se pueden abrir desde el menú. */
  .menu li.con-hijos{display:flex;flex-wrap:wrap;align-items:center}
  .menu li.con-hijos>a{flex:1 1 auto}
  .menu li.con-hijos>ul{flex:1 0 100%}
  .abre-sub{display:block;flex:0 0 auto;width:48px;height:44px;background:none;border:0;
    padding:0;cursor:pointer;color:var(--magenta);position:relative}
  .abre-sub::before{content:"";position:absolute;top:50%;left:50%;width:9px;height:9px;
    border:solid currentColor;border-width:0 2px 2px 0;
    transform:translate(-50%,-70%) rotate(45deg)}
  .menu li.abierto>.abre-sub::before{transform:translate(-50%,-30%) rotate(-135deg)}
  .menu ul ul{position:static;display:none;box-shadow:none;padding-left:16px}
  .menu li.abierto>ul{display:block}
  .menu ul ul a{font-size:13px;padding:10px;border:0}
  .menu li:hover>ul{display:none}.menu li.abierto:hover>ul{display:block}
  #buscador .caja{width:90%}
}

/* ---------- Portada ---------- */
.hero-espacio{height:58px}
.hero{background:var(--hero) center/contain no-repeat;padding:350px 0}
.sep-suave{padding:36px 10px}
.sep-suave::after{content:"";display:block;border-top:1px solid #F8EFF8}
.portada-h1{padding:10px 10px 11px;text-align:center}
.portada-h1 h1{font-size:35px;line-height:.8em;font-weight:700;color:var(--magenta);margin:0}
.portada-intro{max-width:841px;margin:21px auto 0;padding:10px 10px 0;text-align:center}
.portada-intro p{font:900 21px/1.5 var(--titulo);color:var(--marino);margin:0 0 20px}
.portada-intro .destacado{font-size:26px;font-weight:900;color:var(--marino);margin:0 0 20px}
.portada-intro .btn{margin:9px}
.titulo-seccion{text-align:center;margin:21px 0 0;padding:0 10px}
.titulo-seccion h2{font-size:51px;line-height:.8em;font-weight:700;color:var(--naranja);padding-bottom:23px;margin:0;transition:transform .3s}
.titulo-seccion h2:hover{transform:scale(1.02)}
.titulo-seccion h2.magenta{color:var(--magenta)}
.titulo-seccion .kicker{font:300 22px/1.5 var(--titulo);color:var(--gris-claro);text-transform:uppercase;margin:0 0 10px}
.continentes{display:flex;justify-content:center;max-width:954px;margin:0 auto;padding:10px 0}
.continente{flex:0 0 20%;padding:0 20px;display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
.continente .foto{width:100%;aspect-ratio:9/16;object-fit:cover;transition:transform .3s}
.continente a:hover .foto{transform:scale(1.03)}
.continente .mapa{width:81%}
.continente h3{font-size:32px;font-weight:700;color:var(--marino);margin:0;line-height:1.5}
.continente .btn{margin-top:0}
.espacio-grande{height:142px}
.banda-naranja{background:var(--naranja);padding:41px 0 40px}
.banda-naranja .contenedor{display:flex;flex-wrap:wrap}
.banda-naranja a{flex:0 0 25%;padding:30px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:20px;text-align:center;color:#fff}
.banda-naranja img{width:40%;transition:transform .3s}
.banda-naranja a:hover img{transform:scale(1.05)}
.banda-naranja span{font:700 21px/1.5 var(--titulo);color:#fff;text-shadow:0 0 10px rgba(0,0,0,.3);transition:transform .3s}
.banda-naranja a:hover span{transform:scale(1.05)}
.ultimos{padding:80px 80px 0}
.ultimos .titulo-seccion{max-width:480px;margin:0 auto}
.novedades{max-width:1279px;margin:0 auto;padding:80px 40px 130px}
.cbn-env{position:relative}
.cbn-cinta{display:flex;gap:50px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 2px 42px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.cbn-cinta::-webkit-scrollbar{display:none;height:0}
.cbn-tarjeta{flex:none;width:340px;scroll-snap-align:start;position:relative;display:block}
.cbn-foto{display:block;aspect-ratio:7/8;border-radius:24px;background:#E9E6F0 center/cover;box-shadow:0 10px 26px rgba(66,76,107,.16)}
.cbn-pildora{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);background:#fff;color:var(--marino);font:400 26px/1 Georgia,"Times New Roman",serif;padding:11px 30px;border-radius:999px;white-space:nowrap;box-shadow:0 4px 14px rgba(46,51,69,.18)}
.cbn-tarjeta:hover .cbn-pildora{color:var(--magenta)}
.cbn-puntos{display:flex;justify-content:center;gap:9px;margin-top:-18px}
.cbn-dot{width:9px;height:9px;border-radius:50%;border:0;padding:0;background:#D8D5E2;cursor:pointer}
.cbn-dot.on{background:#6E748A}
.banda-redes{position:relative;padding:80px 0;color:#fff;text-align:center;overflow:hidden;isolation:isolate}
.banda-redes::before{content:"";position:absolute;inset:0;background:var(--fondo) 0 -107px/cover;filter:blur(2px);z-index:-1}
.banda-redes .contenedor{display:flex}
.banda-redes>div>div{flex:1 1 50%;padding:0 10px}
.banda-redes p{font:700 40px/1.5 var(--titulo);text-shadow:0 0 12px #000;margin:0 0 32px}
.empresas{padding:100px 0}
.logos{display:flex;justify-content:center;gap:0 50px;padding-top:15px}
.logos img{width:148px;height:230px;object-fit:contain}
.banda-rosa{background:var(--rosa-suave);padding:80px 0;text-align:center}
.banda-rosa .contenedor{max-width:517px}
.banda-rosa .destacado{font:900 29px/1.3 var(--titulo);color:var(--marino);margin:0 0 20px}
.banda-rosa p{font-size:23px;font-weight:800;color:#4D5980;margin:0 0 20px}

@media(max-width:1024px){
  .hero-espacio{display:none}
  .hero{padding:350px 350px 0}
  .continente h3{font-size:27px}
  .banda-naranja a{flex-basis:50%;padding:8px}
  .ultimos{padding:49px 10px 0}.novedades{padding:0 10px 40px}
  .banda-redes{padding:50px 0 60px}.banda-redes::before{background-position:-182px 0}
  .empresas{padding:100px 25px}
  .banda-rosa{padding:40px 20px}
}
@media(max-width:767px){
  .hero-espacio{display:block;height:30px}
  .hero{padding:350px 0 112px;background-image:var(--hero-movil)}
  .portada-h1 h1{font-size:25px;line-height:1.3em}
  .portada-intro p{font-size:18px}.portada-intro .destacado{font-size:20px}
  .titulo-seccion h2{font-size:36px}.titulo-seccion .kicker{font-size:19px;line-height:1.6em}
  .continentes{flex-direction:column;align-items:center}
  .continente{flex-basis:auto;padding:0 0 30px}
  .continente .foto{width:50%}.continente .mapa{display:none}
  .continente h3{font-size:28px}
  .espacio-grande{height:40px}
  .banda-naranja img{width:50px}
  .banda-naranja span{font-size:18px}
  .cbn-tarjeta{width:min(72vw,300px)}
  .banda-redes .contenedor{flex-direction:column;gap:40px}
  .logos{flex-wrap:wrap;gap:10px}.logos img{width:100px;height:100px}
}

/* ---------- Pie ---------- */
/* Pie medido en la viva (1366 px): raya 10+40+4+40+10 = 104; títulos 25 px de alto con 40 de
   margen (20 del contenedor + 20 del widget); párrafo 27 + 14,4; columnas de 550 sin relleno
   extra; bloque legal de 82 px con el texto a +24. Total 312. */
.pie{padding-top:10px}
.pie .raya{margin:40px 10px 50px;border-top:4.1px solid var(--naranja)}
.pie .columnas{display:flex;text-align:center;padding:0 10px}
.pie .columnas>div{flex:1 1 50%;padding:10px 0}   /* cada columna con su relleno: en móvil se apilan y suman (471 px de pie) */
.pie h2{font-size:25px;line-height:1;font-weight:900;color:var(--marino);margin:0 0 40px}
.pie .contacto p{font:500 18px/1.5 var(--titulo);color:var(--marino);margin:0 0 14.4px}
.pie .contacto a,.banda-rosa p a{color:inherit;text-decoration:none}
.redes{list-style:none;margin:0;padding:0;display:flex;justify-content:center;gap:27px}
.redes a{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10%;background:var(--magenta);color:#fff}
.redes svg{width:18px;height:18px;fill:currentColor}
.pie .legal{min-height:82px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:13px;padding:10px}
.pie .legal a{color:#000}
.volver-arriba{position:fixed;right:20px;bottom:20px;width:40px;height:40px;border:0;border-radius:6px;background:var(--magenta);color:#fff;cursor:pointer;opacity:0;visibility:hidden;transition:opacity .3s;z-index:90;display:flex;align-items:center;justify-content:center}
.volver-arriba.visible{opacity:1;visibility:visible}
.volver-arriba::before{content:"";width:12px;height:12px;border:solid #fff;border-width:3px 0 0 3px;transform:rotate(45deg) translate(2px,2px)}
@media(max-width:767px){.pie .columnas{flex-direction:column;gap:0}.pie .contacto h2{margin-bottom:20px}.redes{gap:11px}.redes a{width:42px;height:42px}.redes svg{width:21px;height:21px}.pie .legal{min-height:134px}}

/* ---------- Guías (página de destino) ---------- */
.hero-guia{position:relative;background:center/cover no-repeat;padding:10px;text-align:center;display:flex;flex-direction:column;align-items:center}
.hero-guia{background-image:var(--hero,none)}   /* --hero/--hero-movil solo si hay -640w (hero_640 en build.py); si no, manda el background-image en línea. Fuera del shorthand: un var() sin definir ahí anularía también el center/cover */
.hero-guia .caja-env{width:100%;max-width:683px}   /* el tope real lo pone la hoja de cada página (max-width del widget: 49 %, 59 %, 76 %…); con width:59% se capaban las anchas */   /* lo de cada página lo pone su hoja */
.hero-guia .caja-titulo{margin:151px 30px;background:#fff;padding:19px;border:3px solid var(--marino);border-radius:45px}
.hero-guia h1{font-size:35px;font-weight:900;color:var(--marino);margin:0;line-height:1}
.hero-guia .pildora{position:absolute;top:29px;left:40px;width:9.993%;text-align:center;background:#fff;padding:10px 10px 0;border:6px solid var(--naranja);border-radius:100px;box-shadow:0 0 10px 3px #000;font:700 25px/20px var(--titulo);color:var(--magenta);transition:transform .3s}
.hero-guia .pildora:hover{transform:scale(1.02);color:var(--magenta)}
.hero-guia .pildora p{margin:0 0 14px;overflow-wrap:normal}   /* «Pekín» medía 58,9 px en 58,5 de caja y se partía en dos líneas (40 px); solo se parte en los espacios, como «República Checa» */
.guia-espacio{height:67px}
.guia{display:flex;max-width:1203px;margin:0 auto;align-items:flex-start}
.contenido{flex:0 0 72%;max-width:72%;padding:30px}   /* la columna de la viva lleva 30 */
.lateral{flex:0 0 28%;max-width:28%;padding:30px 30px 0}
.lateral>*{margin:0 0 20px}
/* Como .elementor-widget-wrap: la columna es un flex que envuelve y cada widget ocupa el 100 %.
   Así los márgenes NO se funden: el cuadro «Si viajas a China» lleva 20 px de margen propio
   encima del 20 del widget anterior y en la viva suman 40; en bloque se quedaban en 20.
   (En flex sin el 100 % las fotos con width:100 % se quedaban a 0 px en la lateral.) */
.col,.contenido,.lateral{display:flex;flex-wrap:wrap;align-content:flex-start}
.col>*,.contenido>*,.lateral>*{width:100%}
/* la animación de entrada desplaza la columna un 100 % y en móvil ensanchaba el viewport (scroll horizontal) */
:has(>[data-anim]){overflow-x:clip}
.contenido{font-size:18px;line-height:1.5}   /* los p y li lo HEREDAN: así el tamaño del widget (.e-X, 21 px o 18 en móvil) llega al párrafo */
.contenido h2{font-size:35px;line-height:1;font-weight:900;color:var(--magenta);margin:0}
.contenido h3{font-size:30px;line-height:1;font-weight:700;margin:0}   /* line-height 1 y no 30px: con t-20 (documentación China) el h3 medía 30 en vez de 20 */
.contenido h4{color:var(--marino)}
/* Raya naranja de separación. Medida en la web viva: 3 px de grosor y 15 px de aire
   arriba y abajo (el widget entero ocupa 33 px). Estaba solo dentro de .contenido y en
   los hubs salía la raya gris por defecto del navegador. */
hr.sep{border:0;border-top:3px solid var(--naranja);margin:15px 0;width:100%}
/* El aire de la web viva, medido widget a widget: cada uno lleva 20 px debajo (el último
   de su columna, ninguno) y el relleno que Carmen le puso va en su propio contenedor, que
   el conversor copia al style. En Elementor los widgets son items flex y NO colapsan
   márgenes: por eso `flow-root`, que deja dentro el margen del último párrafo. */
.aire{display:flow-root;margin-bottom:20px}
.aire:last-child{margin-bottom:0}
/* En un contenedor moderno el aire lo pone el `gap` del flex, no el margen de cada widget */
.con:not(.fila){display:flex;flex-direction:column;gap:20px}
/* los hijos llenan el ancho (Elementor les pone width:100%): así align-items:center solo
   centra a los que traen un max-width propio, como la foto de Holafly, sin encoger al resto */
.con:not(.fila)>*{margin-bottom:0;width:100%}
.contenido p,.pagina p{margin:0 0 14.4px}   /* 0.8em a 18 px, como la viva */
.pagina p.titulo,.contenido p.titulo{margin:0;line-height:1}   /* widget de título escrito como <p> */

.contenido ul,.contenido ol,.contenido li{margin-block:0}
.caja-info{border:3px solid var(--naranja);text-align:justify}   /* el relleno viene medido en la hoja */
.foto{margin:0;text-align:center}   /* el aire lo pone .aire, como en la viva */
/* Como .elementor-widget-image a (inline-block): la foto enlazada queda a su tamaño natural y el
   100 % solo la acota (Holafly 600, no 708). En Elementor ese width:100 % es cíclico y el navegador
   lo resuelve como auto; aquí se pone auto de verdad, porque con inline-block y la foto aún sin
   cargar (loading=lazy) el enlace medía 0 px y las fotos de la lateral «faltaban» a 390. */
.foto a{display:block}
/* La foto ENLAZADA no lleva width por CSS: manda su atributo width (= tamaño natural, WordPress lo pone) acotado por max-width:100%, que es lo que hace la viva (a inline-block + 100% cíclico → natural acotado). Así además reserva su caja antes de cargar: con width:auto las de la lateral de «Qué ver en Pekín» medían 0×0 hasta cargarse (lazy, página de 36.000 px) y la auditoría las daba por perdidas. Los width:100% de abajo van solo a la foto SIN enlace (.foto>img) */
.foto figcaption{font-size:16px;line-height:1.4;margin-top:6px;color:var(--texto)}
/* si el ancho viene medido del widget, manda ese: la foto llena su caja y se centra */
.indice{border:4px solid var(--magenta);border-radius:50px;overflow:hidden;background:#fff}
.indice summary{list-style:none;cursor:pointer;background:var(--magenta);color:#fff;padding:27px;font:400 25px/1.2 var(--titulo);text-transform:uppercase;display:flex;justify-content:space-between;align-items:center}
.indice summary::-webkit-details-marker{display:none}
.indice summary::after{content:"";width:12px;height:12px;border:solid #fff;border-width:0 3px 3px 0;transform:rotate(45deg);margin:-6px 4px 0 0;transition:transform .3s}
.indice[open] summary::after{transform:rotate(-135deg);margin-top:6px}
.indice ol{list-style:none;margin:0;padding:27px}
.indice li{margin:0 0 8px;font-size:16px;line-height:1.4}
.indice li.h3{padding-left:1em;font-size:15px}
.indice li.h4{padding-left:2em;font-size:14px}
.indice a{color:var(--texto)}.indice a:hover{color:var(--magenta);text-decoration:underline}
.lateral .foto{margin:0}.lateral .foto>img{width:100%;border-radius:0}.lateral .foto img{border-radius:0}
.lateral iframe{max-width:100%}
.tiempo{display:block;height:114px;overflow:hidden}
/* vídeo propio dentro del texto (bloque cb-tcb de la web viva) */
.cb-tcb{display:block}.cb-tcb::after{content:"";display:block;clear:both}
.cb-tcb .cb-texto p:last-child{margin-bottom:0}
.cb-tcb .cb-video{float:right;width:260px;margin:0 0 14px 28px}
.cb-playc,.cb-play-inv{display:block;width:100%;aspect-ratio:9/16;position:relative;border:0;padding:0;cursor:pointer;background:var(--marino) center/cover no-repeat}
.cb-playc::after,.cb-play-inv::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.18)}
.cb-playc span,.cb-play-inv span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1;width:64px;height:64px;border-radius:50%;background:var(--magenta);color:#fff;font-size:24px;line-height:64px;text-align:center;padding-left:5px;transition:transform .18s}
.cb-playc:hover span,.cb-play-inv:hover span{transform:translate(-50%,-50%) scale(1.09)}
.cb-tcb .cb-video iframe{width:100%;aspect-ratio:9/16;border:0;display:block}
.cb-tcb .cb-pie{margin:8px 0 0;font-size:14px;line-height:1.4;color:var(--gris);text-align:center}
@media(max-width:1024px){
  .hero-guia .caja-env{width:100%;max-width:778px}
  .hero-guia h1{font-size:32px}
  .hero-guia .pildora{top:14px;left:17px;font-size:20px;width:118px}
}
@media(max-width:767px){
  .guia{flex-direction:column}.contenido,.lateral{flex-basis:auto;max-width:none;width:100%}
  .hero-guia{background-image:var(--hero-movil,var(--hero,none))}   /* el LCP en móvil: la -640w */

  .hero-guia .caja-env{max-width:736px}.hero-guia .caja-titulo{margin:43px 28px 28px;padding:18px}.hero-guia h1{font-size:25px}
  .hero-guia .pildora{top:3px;left:6px;width:71px;margin:6px 0;padding:12px 0 0;border-width:3px;font-size:15px;line-height:.1em}   /* medidas del widget de la viva a 767 */
  .contenido,.lateral{padding:30px}   /* la columna de la viva lleva 30 por los cuatro lados también en móvil (medido a 390: el primer párrafo a 30 del borde superior) */
  .foto>img{width:100%}.caja-info{padding:11px 15px 0}
  .cb-tcb .cb-video{float:none;margin:22px auto 0}
}

/* ---------- Hubs de destino: rejillas de iconos, acordeones, tablas, filas ---------- */
.pagina{margin:0 auto;padding:0}   /* como .elementor: el tope lo pone cada sección (1140 + su relleno) */.espacio{width:100%}
/* Rótulo colocado ENCIMA de la foto (los hubs de destino): Elementor lo posiciona en
   absoluto dentro de la columna. Sin esto el rótulo cae debajo y la tarjeta crece. */
.col,.sec,.tarjeta{position:relative}
/* Entrada animada, como Elementor: el bloque está invisible y entra al aparecer en pantalla.
   Quien no quiera animaciones (prefers-reduced-motion) lo ve puesto desde el principio. */
[data-anim]{opacity:0}
[data-anim].anim-va{animation:.8s ease-out both}
[data-anim="izq"].anim-va{animation-name:entra-izq}
[data-anim="der"].anim-va{animation-name:entra-der}
[data-anim="abajo"].anim-va{animation-name:entra-abajo}
[data-anim="arriba"].anim-va{animation-name:entra-arriba}
[data-anim="suave"].anim-va{animation-name:entra-suave}
@keyframes entra-izq{from{opacity:0;transform:translate3d(-100%,0,0)}to{opacity:1;transform:none}}
@keyframes entra-der{from{opacity:0;transform:translate3d(100%,0,0)}to{opacity:1;transform:none}}
@keyframes entra-abajo{from{opacity:0;transform:translate3d(0,100%,0)}to{opacity:1;transform:none}}
@keyframes entra-arriba{from{opacity:0;transform:translate3d(0,-100%,0)}to{opacity:1;transform:none}}
@keyframes entra-suave{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){[data-anim]{opacity:1;animation:none!important}}
.sobrepuesto{z-index:2}
.sobrepuesto a{color:inherit}
.pagina .sobrepuesto :is(h1,h2,h3,h4){margin:8px 0 16px;line-height:1.2}
/* Un bloque HTML a medida ocupa el contenedor de Elementor (1260 sobre 1280), no la columna
   de texto: el que quiera ir estrecho ya trae su propio max-width. Sin esto el mosaico de
   «Sobre mí» sale cortado y las bandas naranjas dejan franjas blancas a los lados. */
/* La caja blanca de «¿No está el destino que buscas?» la pinta el contenedor de Elementor,
   y su estilo no viene en el CSS por elemento que capturamos: medido en la viva. */
.sec.cbSugBox{background:#fff;border-radius:22px;padding:50px 40px 46px;text-align:center;
box-shadow:rgba(66,76,107,.65) 0 24px 54px -32px}
.pagina h2{font-size:35px;line-height:1;font-weight:900;margin:0}   /* el aire va en .aire */
.pagina h1,.contenido h1{margin:0}   /* los títulos de Elementor no llevan margen (la portada medía 8 px de más) */
.pagina h3{font-size:30px;font-weight:700;margin:0}
.aire>:is(h1,h2,h3,h4){margin:0;line-height:1}   /* título de widget de Elementor (.elementor-heading-title): margin 0 y line-height 1; los h4 de imprescindibles medían +13 (8 de margen + 5 de line-height 1.2) */
/* Como Elementor: columnas a porcentaje exacto y el aire POR DENTRO (10 px), sin gap. Con
   gap las columnas salían ~20 px más estrechas y los botones largos partían en dos líneas. */
.fila{display:flex;flex-wrap:wrap;align-items:stretch;align-content:flex-start}   /* las columnas se estiran a la fila, como en Elementor; el centrado vertical lo pone la hoja de cada página */
/* una sección clásica con columnas NO salta de fila en escritorio/tablet: si las anchuras declaradas suman
   más del 100 % (33,3 + 33,1 + 35,2 en el bloque social de Pekín) las columnas encogen (flex 0 1). Las
   rejillas modernas (e-grid) sí envuelven. */
@media(min-width:768px){.fila:not(.e-grid){flex-wrap:nowrap}}   /* sin esto, al apilarse en móvil las líneas se estiran y separan los botones */
.fila>*{flex:1 1 0;min-width:0}
/* las columnas de Elementor llevan 10 px por dentro: sin ellos las fotos de los hubs
   salen más anchas (en /praga/ eran 20 px por tarjeta) */
.fila>.col{padding:10px}
.fila>.col[data-col="50"]{flex:0 1 50%}
.fila>.col[data-col="33"]{flex:0 1 33.333%}
.fila>.col[data-col="25"]{flex:0 1 25%}
.fila>.col[data-col="20"]{flex:0 1 20%}
.fila>.col[data-col="100"]{flex:1 1 100%}

.rejilla-iconos{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 0;margin:20px 0}
.tarjeta-icono{flex:1 1 130px;max-width:190px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:10px;padding:14px 8px;text-align:center;transition:transform .3s}
a.tarjeta-icono:hover{transform:scale(1.05)}
.tarjeta-icono .icono svg{width:46px;height:46px;fill:var(--magenta)}
a.tarjeta-icono:hover .icono svg{fill:var(--naranja)}
.tarjeta-icono p{margin:0;font:700 15px/1.3 var(--cuerpo);color:var(--marino);text-transform:uppercase}
a.tarjeta-icono{color:var(--marino)}
a.tarjeta-icono:hover p{color:var(--naranja)}

/* Acordeón (Essential Addons) MEDIDO en la viva (guía de Tokio, «Transporte»): cabecera gris de 50 px con el
   más/menos magenta a la izquierda y el título marino de 17 px; abierto, fondo marino y todo en blanco; el cuerpo con
   borde gris y texto de 16/27. Ni márgenes ni borde naranja: el aire lo pone .aire y la celda de la rejilla mide 70 */
.acordeones{margin:0}
.acordeon{margin:0;border:0;background:none}
.acordeon summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:15px;background:#f1f1f1;border:1px solid rgba(0,0,0,.02);border-radius:11px;font:600 17px/1 var(--cuerpo);color:var(--marino)}
.acordeon summary::-webkit-details-marker{display:none}
.acordeon summary svg{flex:none;width:16px;height:16px;fill:var(--magenta)}
.acordeon summary .acordeon-menos,.acordeon[open] summary .acordeon-mas{display:none}
.acordeon[open] summary .acordeon-menos{display:block}
.acordeon[open] summary{background:var(--marino);color:#fff;border-radius:13px}
.acordeon[open] summary svg{fill:#fff}
.acordeon summary:hover{color:var(--magenta)}
.acordeon-cuerpo{padding:15px;border:1px solid #eee;color:#333;font-size:16px;line-height:1.7}
.acordeon-cuerpo ul{margin:0;padding-left:1.2em}
.acordeon-cuerpo li{margin:0}

/* Tablas de Essential Addons, medidas en /tarjetas-para-viajar/: celdas 20px 15px arriba/izq,
   cabecera 16 px 600 (naranja en 14 de las 15; la de tarjetas, marino, viene por su hoja),
   celdas 14 px, filas pares #f2f2f2, sin bordes, párrafos con su margen de 14,4 px. */
.tabla{width:100%;border-collapse:separate;border-spacing:0;margin:0;font-size:14px}   /* «Montserrat»,«sans-serif» ENTRE COMILLAS es lo que declara Essential Addons en la viva: ni carga Montserrat ni el genérico entre comillas vale como genérico, así que cae a la fuente por defecto del navegador (serif). Se replica tal cual; con Lato las columnas medían 454 y no 477. Cada tabla que fija Lato lo trae en su hoja */
.tabla th{background:var(--naranja);color:#fff;font:600 16px/1 "Montserrat","sans-serif";text-transform:none;padding:20px 15px;text-align:left;vertical-align:top}
.tabla td{border:0;padding:20px 15px;text-align:start;vertical-align:top;font:14px/1 "Montserrat","sans-serif";color:#000;background:rgba(128,128,128,.07)}
.tabla tbody tr:nth-child(even) td{background:#f2f2f2}
.tabla td p,.contenido .tabla td p{font-size:14px;line-height:1;margin:0 0 14.4px}   /* con .contenido delante para ganar a «.contenido p» (18 px) */
/* el mapa de Google de los hubs viene en un <noscript> con width=640; la viva lo pinta a todo el ancho (806) */
.bloque-html iframe[src*="google.com/maps"]{width:100%}

.slide-libre{flex:none;width:calc((100% - 20px)/3);scroll-snap-align:start}   /* 3 por vista en escritorio (374 en 1143), 2 en tablet (349 en 708) y 1 en móvil, como el swiper de la viva */
.slide-libre .foto{margin:0;line-height:0}   /* como el figure.wp-caption de la viva: sin hueco bajo la imagen */
.slide-libre .foto img{width:100%;border-radius:24px}
.slide-libre figcaption{font:700 16px/1.4 var(--cuerpo);color:var(--marino);text-transform:uppercase;margin-top:0}   /* medido en Chengdú: 16px/22.4 y sin margen (la tarjeta mide 250, no 258) */
.carrusel:has(>.slide-libre){margin:-8px 0 -20px;padding-left:0;padding-right:0}   /* sin los 2 px laterales: la tarjeta mide el 100 % (330 a 390, como el slide de la viva) */   /* el relleno (8 arriba, 20 abajo) queda para el hover, pero el bloque mide lo que el swiper de la viva: 270 en Austria y Chengdú, no 298 */
.carrusel{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 2px 20px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.carrusel::-webkit-scrollbar{display:none}
/* sin margen propio: en la viva el aire lo pone el contenedor de la columna (10 px).
   Con margen, dos botones apilados quedaban a 66 px en vez de a 20. */
.pagina .btn{display:inline-block}   /* lo centra el text-align copiado del widget */
/* los de redes llevan icono: en tabla el hueco entre icono y texto desaparece */
/* en bloque y ajustado al texto: como inline dejaban el hueco de la línea base debajo,
   y dos botones apilados quedaban 16 px más separados que en la viva */
.pagina .btn-yt,.pagina .btn-ig{display:inline-flex}

@media(max-width:1024px){
  .slide-libre{width:calc((100% - 10px)/2)}   /* 2 por vista en tablet (349 en 708); tiene que ir DESPUÉS de la regla de escritorio de .slide-libre o la pisa */
  /* (fuera la regla que ponía las columnas de 25/20 % a 50 % en tablet: la viva mantiene 4 y 5 por fila a 768;
     si una columna cambia de ancho en tablet lo dice su @media y lo copia la hoja de la página) */
}
@media(max-width:767px){
  /* la fila sigue en fila y envuelve: cada columna ocupa el 100 % salvo que su @media de
     móvil diga otra cosa (la hoja: 50 % en los iconos de la portada, que la viva pone a dos
     por fila). Con flex-direction:column las del 50 % se apilaban a media anchura. */
  .fila>*,.fila>.col[data-col]{flex:0 1 auto;width:100%;max-width:none}
  .tarjeta-icono{flex-basis:100px}
  .tarjeta-icono .icono svg{width:38px;height:38px}
  .tarjeta-icono p{font-size:13px}
  .slide-libre{width:100%}
}
/* En móvil la tabla de EA conserva letra y relleno de escritorio y su envoltorio hace scroll
   horizontal (medido en clima-pekin a 390: tabla de 363 px en un envoltorio de 310 con
   overflow-x:scroll). Encoger letra y relleno la dejaba en 281 px y 9 px más baja. */
.aire:has(>.tabla){overflow-x:auto}
/* Tablas a todo el ancho de su columna (Elementor las dejaba al 80-90 % con un hueco a la derecha,
   o al 103 % asomando) y con las esquinas redondeadas. !important: cada página fija su % en su hoja */
.aire:has(>.tabla){max-width:100%!important}
.aire>.tabla{max-width:100%!important;border-radius:14px;overflow:hidden}
/* Cabeceras y celdas centradas en todas (también las tablas nuevas, que no traen hoja de Elementor);
   la de /tarjetas-para-viajar/ lleva texto largo y va a la izquierda */
.aire:not(.e-96b9063)>.tabla :is(th,td){text-align:center!important}

/* ---------- Página de error ---------- */
.rejilla-enlaces{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:20px 0 40px}
.rejilla-enlaces a{border:2px solid var(--naranja);border-radius:11px;padding:10px 18px;font:700 16px/1 var(--cuerpo);color:var(--marino)}
.rejilla-enlaces a:hover{background:var(--naranja);color:#fff}

/* Rejillas con el mismo número de columnas que la web viva (data-cols lo mide layouts.py) */
/* El hueco entre columnas (gap, medido en la viva y puesto por la hoja como --gap) se descuenta
   del ancho: con 33,333 % + gap 20 la tercera tarjeta saltaba de fila (itinerarios de Chengdú). */
.fila>*{--gap-fila:0px}   /* la hoja de la fila con hueco la sobreescribe en sus hijos (.e-X.e-X > *): así la columna no usa su propio gap interno */
.fila[data-cols] > *{flex:0 0 auto}
.fila[data-cols="2"] > *{width:calc((100% - var(--gap-fila))/2)}
.fila[data-cols="3"] > *{width:calc((100% - 2*var(--gap-fila))/3)}
.fila[data-cols="4"] > *{width:calc((100% - 3*var(--gap-fila))/4)}
.fila[data-cols="5"] > *{width:calc((100% - 4*var(--gap-fila))/5)}
.fila[data-cols="6"] > *{width:calc((100% - 5*var(--gap-fila))/6)}
/* En tablet la fila conserva sus columnas, como Elementor (col-25 sigue al 25 % a 768): la regla
   que bajaba 4/5/6 → 3 dejaba la portada con scroll horizontal (4 columnas al 33 % sin envolver)
   y los hubs con los iconos y los países a 3 por fila cuando la viva va a 6 y a 4. */
@media(max-width:767px){
  .fila[data-cols] > *{width:100%}
}

/* Formularios (contacto y «pedir esta guía»). Medido en la web viva: el rótulo no se ve,
   va dentro del campo; el botón ocupa todo el ancho y no va en mayúsculas. */
.oculto-visual{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.formulario{max-width:550px;margin:0 auto}   /* medido en la viva */
.formulario .campo{margin:0 0 20px}
.formulario input,.formulario textarea{width:100%;box-sizing:border-box;padding:8px 16px;
  border:1px solid #69727d;border-radius:3px;font:15px/1.5 var(--cuerpo);color:#1f2124;background:#fff}
.formulario input{height:40px}
.formulario textarea{height:96px;padding:5px 14px;resize:vertical}
.formulario input::placeholder,.formulario textarea::placeholder{color:#1f2124;opacity:1}
.formulario input:focus,.formulario textarea:focus{outline:2px solid var(--magenta);outline-offset:1px}
.formulario .btn{display:block;width:100%;height:40px;padding:0 24px;border:0;border-radius:3px;
  background:var(--magenta);color:#fff;font:15px/40px var(--cuerpo);text-transform:none;
  letter-spacing:normal;cursor:pointer}
.formulario .btn:hover{background:#d92b79}
/* El formulario de «viajes» lo viste el CSS de su propio bloque (.cbSugBox). Las reglas
   genéricas de aquí —botón a todo el ancho y de 40 px— lo declara el bloque, así que hay
   que apartarlas: si no, el botón «PEDIR ESTA GUÍA» sale estirado y aplastado. */
.cbSugBox .formulario{max-width:none}
/* en bloque, no en línea: como inline-block se alineaban por la línea base del texto y el
   botón quedaba más abajo que el campo */
.cbSugBox .formulario .btn{display:block;width:auto;height:auto}
.elementor-form-fields-wrapper .campo>input{display:block}
/* en flex, como Elementor: en bloque, el salto de línea del HTML añadía una línea vacía de
   27 px al grupo y el botón quedaba 10 px por debajo del campo */
.elementor-form-fields-wrapper .campo{display:flex;align-items:center}
/* dentro del grupo flex, el texto de la nota deja de ser un bloque al 100 %: hay que decirlo */
.elementor-form-fields-wrapper .campo>*{flex:1 1 auto}
/* Cada grupo toma su propia altura y todos arrancan arriba: con stretch la línea crecía y
   el botón quedaba por debajo del campo. */
.elementor-form-fields-wrapper{align-content:flex-start}
/* dentro del formulario el botón no lleva el margen de los botones sueltos de página: esos
   30 px lo dejaban 10 px por debajo del campo */
.pagina .elementor-form-fields-wrapper .btn{display:block;margin:0}
.aviso-form{max-width:560px;margin:0 auto 20px;padding:12px 16px;border-radius:3px;
  border:1px solid var(--naranja);background:rgba(255,145,77,.12);color:var(--texto)}
.aviso-form.error{border-color:var(--magenta);background:var(--rosa-suave)}

/* Tipografía que Elementor declaraba bloque a bloque. Las clases las pone el conversor a
   partir del CSS de cada página; los valores son los medidos en la web viva. */
.justificado,.justificado p{text-align:justify}
.derecha,.derecha p{text-align:right}
.t-serif{font-family:var(--titulo)}   /* el color lo copia la hoja de cada página del CSS del widget (los rótulos blancos de la banda de redes salían marino) */
/* Solo en escritorio: en tablet y móvil el tamaño lo pone la hoja de cada página en el
   envoltorio (.e-X, copiado de los @media de Elementor) y el texto lo hereda. Con la clase
   activa a todo ancho, «América» seguía a 32 px a 768 cuando la viva baja a 27. */
@media(min-width:1025px){
.t-13{font-size:13px}
.t-15{font-size:15px;letter-spacing:.1em}
.t-17{font-size:17px;font-weight:700}
.t-18{font-size:18px;font-weight:500}
.t-20{font-size:20px;font-weight:700}
.t-21{font-size:21px;font-weight:700}
.t-25{font-size:25px;font-weight:700}
.t-27{font-size:27px;font-weight:600}
.t-32{font-size:32px;font-weight:700}   /* el interlineado es el del cuerpo (1,5): «Europa» mide 48 px en la viva */
.t-40{font-size:40px;font-weight:700}
}
@media(max-width:767px){
}

/* Iconos sueltos de los hubs (informacion, vuelos, seguro, vpn, datos, actividades).
   En la web viva miden 50 px y van en magenta; su rótulo, negro y sin subrayar. Como en el
   widget de Elementor, el svg va en línea sobre la base: la caja mide 50 + el descenso de la
   línea (57 en la viva) y no lleva margen (el aire lo pone el gap del contenedor). Con
   line-height:0 + 10 px de margen medía 60 y el rótulo caía 3 px más abajo. */
.icono{display:block;margin:0 auto;text-align:center;color:var(--magenta)}
.icono svg{width:50px;height:50px;fill:currentColor}
a.icono:hover{color:var(--naranja)}
.t-17 a{color:#000;text-decoration:none}
.t-17 a:hover{color:var(--magenta)}

/* Color declarado por Elementor en el propio bloque. Van con el contenedor delante para
   ganarle a las reglas de .pagina h2 / .contenido h2, que son las del caso general. */
/* El bloque puede ser un envoltorio con el título dentro: el color heredado pierde contra la
   regla directa de h2, así que hay que nombrar también a los títulos de dentro. */
.pagina .c-magenta,.contenido .c-magenta,.pagina .c-magenta :is(h1,h2,h3,h4),.contenido .c-magenta :is(h1,h2,h3,h4){color:var(--magenta)}
.pagina .c-naranja,.contenido .c-naranja,.pagina .c-naranja :is(h1,h2,h3,h4),.contenido .c-naranja :is(h1,h2,h3,h4){color:var(--naranja)}
.pagina .c-marino,.contenido .c-marino,.pagina .c-marino :is(h1,h2,h3,h4),.contenido .c-marino :is(h1,h2,h3,h4){color:var(--marino)}
.pagina .c-blanco,.contenido .c-blanco,.pagina .c-blanco :is(h1,h2,h3,h4),.contenido .c-blanco :is(h1,h2,h3,h4){color:#fff}
.pagina .centrado,.contenido .centrado{text-align:center}
.pagina .justificado,.contenido .justificado{text-align:justify}
.pagina .derecha,.contenido .derecha{text-align:right}
.pagina .t-serif,.contenido .t-serif{font-family:var(--titulo)}
@media(min-width:1025px){
.pagina h2.t-40,.pagina h3.t-40,.contenido h2.t-40{font-size:40px;font-weight:700}
.pagina h2.t-32,.contenido h2.t-32{font-size:32px;font-weight:700}
.pagina h2.t-27,.contenido h2.t-27{font-size:27px;font-weight:600}
.pagina h2.t-25,.contenido h2.t-25{font-size:25px;font-weight:700}
}

/* Colores sueltos que la web viva usa en títulos concretos. */
.pagina .c-marino2,.contenido .c-marino2,.pagina .c-marino2 :is(h1,h2,h3,h4),.contenido .c-marino2 :is(h1,h2,h3,h4){color:#4D5980}
.pagina .c-gris,.contenido .c-gris,.pagina .c-gris :is(h1,h2,h3,h4),.contenido .c-gris :is(h1,h2,h3,h4){color:var(--gris-claro)}
.pagina .c-texto,.contenido .c-texto,.pagina .c-texto :is(h1,h2,h3,h4),.contenido .c-texto :is(h1,h2,h3,h4){color:var(--texto)}
/* Las páginas legales no las pinta Elementor: sus títulos van en el gris del texto. */
.pagina.legal :is(h1,h2,h3){color:var(--texto)}
/* Título del selector de destinos de /viajes/: en la web viva va centrado. */
.cbs-h2{text-align:center}

/* Carruseles. En la web viva son Swiper CON FLECHAS: sin ellas parecían una fila cortada y no
   se podía pasar a las siguientes tarjetas. Medido: tarjeta de vídeo 255x200, tarjeta libre
   374, hueco de 10 y flecha de 41 px en naranja. */
.carrusel-env{position:relative}
.carrusel-flecha{position:absolute;top:calc(50% - 14px);width:41px;height:41px;display:flex;
  align-items:center;justify-content:center;padding:0;border:0;background:none;cursor:pointer;
  color:var(--naranja);z-index:2;transform:translateY(-50%)}
.carrusel-flecha svg{width:41px;height:41px;fill:currentColor}
.carrusel-flecha:hover{color:var(--magenta)}
.carrusel-flecha.sig{right:-18px}
/* Carrusel de medios: flecha pequeña y clara encima de la foto, y puntos debajo. Medido:
   20 px, rgba(237,237,237,.9), a 10 px del borde; puntos de 6 px negros al 20 %. */
.medios .carrusel-flecha{width:20px;height:20px;color:rgba(237,237,237,.9);top:calc(50% - 22px)}
.medios .carrusel-flecha svg{width:20px;height:20px}
.medios .carrusel-flecha.sig{right:10px}
.medios .carrusel-flecha.ant{left:10px}
.medios .carrusel-flecha:hover{color:#fff}
.carrusel-puntos{display:flex;justify-content:center;gap:12px;margin:-8px 0 4px}
.carrusel-punto{width:6px;height:6px;border-radius:50%;border:0;padding:0;background:#000;
  opacity:.2;cursor:pointer}
.carrusel-punto.on{opacity:1}
.carrusel-flecha.ant{left:-18px;transform:translateY(-50%) rotate(180deg)}
.carrusel-flecha[disabled]{opacity:.35;cursor:default}
/* (fuera la regla que a ≤1220 metía las flechas a 0: la viva las deja a −18 px en TODAS las pantallas, medido a 390, 768 y 1280 en /china/; a 0 pisaban 31 px de la foto en móvil) */

/* Tarjeta de vídeo del carrusel de medios: foto de fondo y el botón de play encima. */
.slide{flex:none;width:255px;height:200px;scroll-snap-align:start;position:relative;display:block;
  background:#E9E6F0 center/cover no-repeat;background-image:var(--img)}
/* Play: círculo magenta pequeño con aro blanco y sombra. Visible sobre miniaturas cargadas
   sin tapar la portada. Centrado (Carmen lo quiere en el centro, no en la esquina) y pequeño y
   algo translúcido: a 64 px con velo, 23-sep, tapaba el título de la miniatura. */
.slide-video::after{content:"";position:absolute;left:50%;top:50%;width:42px;height:42px;
  margin:-21px 0 0 -21px;border-radius:50%;pointer-events:none;transition:transform .2s ease;
  background:rgba(242,53,141,.8) 57% 50%/15px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M5 2.8v18.4c0 .9 1 1.4 1.7.9l14.2-9.2c.7-.4.7-1.4 0-1.8L6.7 1.9C6 1.4 5 1.9 5 2.8z'/%3E%3C/svg%3E");
  box-shadow:0 0 0 2px rgba(255,255,255,.9),0 3px 10px rgba(0,0,0,.3)}
.slide-video:hover::after{transform:scale(1.1)}
.rotulo-oculto{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* Ventana del vídeo: la web viva lo abre encima, no manda a YouTube. */
.visor{position:fixed;inset:0;background:rgba(0,0,0,.86);z-index:1000;display:flex;
  align-items:center;justify-content:center;padding:24px}
.visor-caja{width:min(1100px,92vw);aspect-ratio:16/9}
.visor-caja iframe{width:100%;height:100%;border:0;border-radius:6px}
.visor-cerrar{position:absolute;top:14px;right:20px;background:none;border:0;color:#fff;
  font-size:38px;line-height:1;cursor:pointer;padding:4px 10px}
@media(max-width:767px){.slide{width:min(78vw,255px)}}

/* Columnas desiguales: el ancho real medido en la web viva (layouts.py). Elementor pone
   el texto al 83 % y una etiqueta al 11 %, y a partes iguales quedaba fatal. */
.fila>.a-5{flex:0 0 auto;width:5%}
.fila>.a-10{flex:0 0 auto;width:10%}
.fila>.a-15{flex:0 0 auto;width:15%}
.fila>.a-20{flex:0 0 auto;width:20%}
.fila>.a-25{flex:0 0 auto;width:25%}
.fila>.a-30{flex:0 0 auto;width:30%}
.fila>.a-35{flex:0 0 auto;width:35%}
.fila>.a-40{flex:0 0 auto;width:40%}
.fila>.a-45{flex:0 0 auto;width:45%}
.fila>.a-50{flex:0 0 auto;width:50%}
.fila>.a-55{flex:0 0 auto;width:55%}
.fila>.a-60{flex:0 0 auto;width:60%}
.fila>.a-65{flex:0 0 auto;width:65%}
.fila>.a-70{flex:0 0 auto;width:70%}
.fila>.a-75{flex:0 0 auto;width:75%}
.fila>.a-80{flex:0 0 auto;width:80%}
.fila>.a-85{flex:0 0 auto;width:85%}
.fila>.a-90{flex:0 0 auto;width:90%}
.fila>.a-95{flex:0 0 auto;width:95%}
@media(max-width:767px){.fila>[class*="a-"]{width:100%}}

/* Un título escrito DENTRO de un bloque de texto no es el del widget de título: el tema le
   da interlineado 1,2 y margen 8/16, y mide 42 px en vez de 35 (medido en /viajes/). */
.pagina .texto :is(h2,h3,h4),.contenido .texto :is(h2,h3,h4){line-height:1.2;margin:8px 0 16px}

/* Elementor limita el ancho del contenido con --container-max-width: 1140 px en escritorio,
   1024 en tablet y 320 en móvil (medido en el CSS de la web viva). En escritorio lo hace
   .pagina; de 1024 para abajo manda el relleno propio de cada contenedor, y en móvil el
   bloque se queda en 320 px centrado. Sin esto el texto salía 20 px estrecho en tablet y
   30 px ancho en móvil. */

/* Bloques que Elementor esconde según la pantalla (elementor-hidden-desktop/tablet/mobile):
   el conversor los marca con data-oculto. Los mapas de los continentes no salen en móvil y
   en /austria/ hay dos widgets de GetYourGuide, uno para escritorio y otro para móvil. */
@media(min-width:1025px){[data-oculto~="desktop"]{display:none!important}}
@media(min-width:768px) and (max-width:1024px){[data-oculto~="tablet"]{display:none!important}}
@media(max-width:767px){[data-oculto~="mobile"]{display:none!important}}

/* Cabecera móvil medida en la viva a 390: relleno 20, logo en media fila (foto al 67 %),
   hamburguesa al final, y la lupa con las redes en una fila entera: 134 px de alto. */
@media(max-width:767px){
  .cabecera .barra{padding:20px}
  .logo{flex:0 0 50%;text-align:start}.logo img{width:77%}   /* medido a 390: logo 135 px pegado al margen */
  .menu-toggle{margin:0 0 0 calc(50% - 45px)}
  .iconos{flex:0 0 100%}
}

/* Fachada de vídeo de Carmen (.cbv, 97 páginas): en la viva va en un <style> del <head> puesto por su snippet, no en
   ningún widget, por eso el conversor no lo traía. Copiado LITERAL de la viva; el clic lo atiende site.js */
.cbv{position:relative;aspect-ratio:16/9;background:#000;cursor:pointer;overflow:hidden;border-radius:8px}
.cbv img{width:100%;height:100%;object-fit:cover;display:block}
.cbv button{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:68px;height:48px;padding:0;border:0;border-radius:14px;background:#f00;cursor:pointer;transition:background .2s}
.cbv:hover button{background:#c00}
.cbv button::before{content:"";display:block;margin:0 auto;width:0;height:0;border:11px solid transparent;border-left:18px solid #fff;transform:translateX(5px)}
.cbv iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Iconos de las guías en móvil (Pekín, Tokio, Shanghái…): van en dos bloques de Elementor seguidos
   y, al apilarse, los rellenos de 10 px de ambos contenedores (4 × 10) dejaban 40 px de más entre
   el último icono del primero y el primero del segundo (177 frente a 137). WordPress lo hacía igual;
   Pedro pidió los huecos iguales solo en móvil (24-sep). */
@media(max-width:767px){
  .sec.con:has(>.e-grid .icono):has(+.sec.con>.e-grid .icono),
  .sec.con:has(>.e-grid .icono):has(+.sec.con>.e-grid .icono)>.e-grid{padding-bottom:0}
  .sec.con:has(>.e-grid .icono)+.sec.con:has(>.e-grid .icono),
  .sec.con:has(>.e-grid .icono)+.sec.con:has(>.e-grid .icono)>.e-grid{padding-top:0}
}


/* widget del tiempo centrado sobre la hora (Pedro, 25-sep-2026): el .aire lleva max-width ~80 % y quedaba a la izquierda */
.aire:has(>.bloque-shortcode .weatherwidget-io){margin-inline:auto}
/* Píldora del destino: el ancho fijo viene de la viva (y muchas páginas lo repiten en su <style>); con
   nombres largos («Chongqing», «Zhangjiajie») el texto se salía. min-width:min-content la deja crecer solo
   cuando el nombre no cabe, con aire a los lados; .pildora.pildora gana a las reglas de cada página. */
.hero-guia .pildora.pildora{min-width:min-content;padding-left:16px;padding-right:16px}
@media (max-width:767px){.hero-guia .pildora.pildora{padding-left:8px;padding-right:8px}}

/* ---------- Menú: panel de Destinos ---------- */
/* Antes eran tres cascadas (Europa › España › Barcelona) con todo en mayúsculas magenta: costaba leerlo.
   Ahora Destinos abre un solo panel con todo a la vista: continente = rótulo naranja, país = foto
   redonda + nombre en magenta, ciudades debajo en marino. Mismo HTML anidado en escritorio y móvil. */
.menu li.mega ul ul{position:static;display:block;box-shadow:none;min-width:0;background:none;padding:0}
.menu li.mega ul li.con-hijos>a::before,.menu li.mega ul .abre-sub{display:none}   /* aquí no se despliega nada más */
.menu li.mega>ul>li.con-hijos>a{display:flex;align-items:center;gap:14px;border:0;font:900 13px/1 var(--cuerpo);
  letter-spacing:.14em;text-transform:uppercase;color:var(--naranja)}
.menu li.mega>ul>li.con-hijos>a::after{content:"";flex:1;height:2px;background:var(--naranja);opacity:.3}
.menu li.mega>ul>li>a[href="#"]{cursor:default}
.menu li.mega>ul>li>ul>li>a{display:flex;align-items:flex-start;gap:12px;padding:0;border:0;
  font:900 14px/1.2 var(--cuerpo);letter-spacing:.06em;text-transform:uppercase;color:var(--magenta)}
.menu li.mega>ul>li>ul>li>a[href="#"]{cursor:default;color:var(--magenta)}
.menu li.mega img{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:none;padding:2px;
  border:2px solid var(--naranja);background:#fff;transition:border-color .2s,transform .2s}
.menu li.mega>ul>li>ul>li>a:hover img{border-color:var(--magenta);transform:scale(1.06)}
.menu li.mega>ul>li>ul>li>ul a{text-transform:none;border:0;color:var(--marino)}
.menu li.mega>ul>li>ul>li>ul a:hover,.menu li.mega>ul>li>ul>li>ul li.activo>a{color:var(--magenta)}
.menu li.mega .mega-pie{text-align:center}
.menu li.mega .mega-pie a.btn{display:inline-block;font:500 16px/1 var(--boton);color:#fff;padding:15px 30px;
  border:3px solid #fff;text-transform:none}
.menu li.mega .mega-pie a.btn:hover{color:var(--naranja);border-color:var(--naranja);background:#fff}
@media(min-width:1025px){
  .menu li.mega{position:static}   /* el panel se coloca contra la cabecera (sticky), no contra «Destinos» */
  .menu li.mega>a::before{transition:transform .25s}
  .menu li.mega:hover>a::before,.menu li.mega:focus-within>a::before{transform:rotate(180deg)}
  .menu li.mega>ul{left:50%;top:100%;transform:translateX(-50%);width:min(1060px,94vw);padding:28px 44px 0;
    border-top:3px solid var(--naranja);border-radius:0 0 18px 18px;box-shadow:0 22px 44px rgba(66,76,107,.18);
    grid-template-columns:1fr 3fr;column-gap:56px;align-items:start}
  .menu li.mega>ul::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}   /* puente: el ratón no lo cierra al bajar */
  .menu li.mega:hover>ul,.menu li.mega:focus-within>ul{display:grid}
  .menu li.mega>ul>li.con-hijos>a{padding:0 0 16px}
  .menu li.mega>ul>li>ul{display:block;columns:3;column-gap:28px}   /* columnas y no rejilla: España (4 ciudades) no deja un hueco en la fila */
  .menu li.mega>ul>li>ul>li{break-inside:avoid;padding-bottom:20px}
  .menu li.mega>ul>li:first-child>ul{columns:1}
  .menu li.mega>ul>li>ul>li>a{padding-top:4px}.menu li.mega>ul>li>ul>li>a img{margin-top:-4px}   /* nombre a la altura de lo alto del círculo */
  .menu li.mega>ul>li>ul>li>ul{padding:0 0 0 68px;margin-top:-30px}
  .menu li.mega>ul>li>ul>li>ul a{display:inline-block;padding:3px 0;font:400 16px/1.35 var(--cuerpo)}
  .menu li.mega>ul>li>ul>li>ul a:hover{text-decoration:underline;text-decoration-color:var(--naranja);text-underline-offset:4px}
  .menu li.mega .mega-pie{grid-column:1/-1;margin:26px -44px 0;padding:18px;background:var(--rosa-suave);border-radius:0 0 18px 18px}
}
@media(max-width:1024px){
  .menu li.mega>ul{padding:2px 10px 18px}
  /* la cabecera es pegajosa: si el menú abierto mide más que la pantalla, lo de abajo (Descuentos, Contacto) no se alcanzaba */
  .menu.abierto{max-height:calc(100vh - 160px);max-height:calc(100dvh - 160px);overflow-y:auto;overscroll-behavior:contain}
  .menu li.mega>ul>li{display:block}
  .menu li.mega>ul>li.con-hijos>a{padding:16px 0 12px}
  .menu li.mega>ul>li>ul{display:block;columns:160px;column-gap:14px}   /* columnas y no rejilla (España dejaba un hueco bajo Austria); 160 px = mismas columnas que la rejilla de antes, píldoras en vertical (Pedro, 12-oct) */
  .menu li.mega>ul>li>ul>li{display:block;break-inside:avoid;padding-bottom:18px}
  .menu li.mega>ul>li>ul>li>a{font-size:13px;gap:10px}
  .menu li.mega img{width:44px;height:44px}
  .menu li.mega>ul>li>ul>li>a{padding-top:3px}.menu li.mega>ul>li>ul>li>a img{margin-top:-3px}
  .menu li.mega>ul>li>ul>li>ul{display:flex;flex-wrap:wrap;gap:6px;padding:0 0 0 54px;margin-top:-20px}   /* píldoras al lado del círculo, bajo el nombre */
  .menu li.mega>ul>li>ul>li>ul a{display:block;padding:7px 13px;font:700 14px/1.2 var(--cuerpo);
    background:#fff;border:1.5px solid rgba(242,53,141,.35);border-radius:999px}
  .menu li.mega .mega-pie{padding-top:22px}
}

/* Caja del código de Holafly (div.aire.cupon). Mismas reglas que llevan en su <style> /esim-china/, /esim-holafly/,
   /descuento-heymondo/ y /vpn-china/ (se dejan ahí: `desplegar.sh --solo` no sube base.css).
   .cupon-guia = la variante de las guías (14-oct-2026, maqueta en la previa): más aire dentro y sin justificar. */
.cupon{margin:0 0 30px;padding:26px 22px 24px;border:3px dashed var(--naranja);border-radius:30px;background:var(--rosa-suave);text-align:center}
.cupon p{margin:0 0 12px;font:400 17px/1.5 var(--cuerpo);color:var(--marino)}
.cupon .cupon-et{font:900 14px/1.2 var(--cuerpo);letter-spacing:.1em;text-transform:uppercase}
.cupon .cupon-cod{display:inline-block;margin:2px 0 14px;padding:10px 26px;border-radius:14px;background:#fff;font:900 40px/1 var(--cuerpo);letter-spacing:.14em;color:var(--magenta)}
.cupon .btn{margin:4px 0 0}
.cupon .cupon-fecha{margin:14px 0 0;font-size:14px}
.cupon.cupon-guia{padding:24px 32px}
.cupon.cupon-guia p{text-align:center}
.cupon.cupon-guia .btn:hover,.cupon.cupon-guia .btn:focus{background:#fff;color:var(--naranja);border-color:var(--naranja)}
@media(max-width:767px){.cupon.cupon-guia{padding:20px}}

/* Widget de DISPONIBILIDAD de GetYourGuide (18-oct): se monta vacío (27 px) y al cargar crece a
   ~378 px (617 en móvil). Se reserva casi todo ese alto para que el texto no salte (CLS). */
[data-gyg-widget="availability"]{min-height:370px}
@media (max-width:767px){[data-gyg-widget="availability"]{min-height:600px}}
/* flechas de los carruseles fuera de las fotos en ordenador: a -18px se montaban sobre ellas (Pedro, 25-oct-2026) */
@media (min-width:1280px){.carrusel-flecha.ant{left:-54px}.carrusel-flecha.sig{right:-54px}}
/* el icono de MONEDA de las páginas de información trae fill="#f2358dff" en el path y no cambiaba de color al pasar el ratón (Pedro, 25-oct-2026) */
.icono svg [fill]{fill:inherit}