/* ==========================================================================
Route by Route – Entradas · Plantilla de entrada (diseño 2026)
Réplica de la maqueta aprobada (rediseno-aeropuerto-barcelona) adaptada al
marcado real de Gutenberg + Kadence. Solo se carga en entradas con el
interruptor «Diseño Route by Route» activado (body.rbr-entrada).
· NO define cabecera, pie ni newsletter: son globales (plugin rbr-home).
· El contenido va dentro de un Grupo con clase «rbr-shell rbr-shell--entrada»:
hereda los tokens (--c-*, --f-*…) y componentes (.btn, .container, .stamp…)
de rbr-home. Todo se acota a .rbr-shell--entrada para ganar al reseteo
del plugin sin !important y sin afectar a nada más.
· Kadence envuelve cada Grupo en .wp-block-group__inner-container
(display: contents por rbr-home): por eso los selectores de hijo directo
usan :is(X, X > .wp-block-group__inner-container) > …
========================================================================== */
/* 0. KADENCE: lienzo a ancho completo solo en estas entradas ---------------- */
body.rbr-entrada #inner-wrap { padding-top: 0; }
body.rbr-entrada .content-area { margin-top: 0; margin-bottom: 0; }
body.rbr-entrada .content-container.site-container { max-width: none; padding: 0; }
body.rbr-entrada .entry.single-entry { box-shadow: none; border-radius: 0; margin: 0; background: transparent; }
body.rbr-entrada .entry-content-wrap { padding: 0; }
body.rbr-entrada .entry-content.single-content { margin: 0; }
body.rbr-entrada .entry-content > .rbr-shell--entrada { max-width: none; margin: 0; }
:root { interpolate-size: allow-keywords; }
/* Etiquetas y comentarios (plantilla de Kadence / wpDiscuz): mismo ancho que el texto */
body.rbr-entrada .entry-footer,
body.rbr-entrada #comments.comments-area {
box-sizing: border-box;
width: min(100% - 40px, 800px);
margin-left: max(20px, (100% - 1240px) / 2); margin-right: auto;
}
@media (min-width: 768px) {
body.rbr-entrada .entry-footer, body.rbr-entrada #comments.comments-area {
width: min(100% - 64px, 800px); margin-left: max(32px, (100% - 1240px) / 2);
}
}
body.rbr-entrada .entry-tags { font-family: Inter, system-ui, sans-serif; }
body.rbr-entrada .entry-tags a {
display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; margin: 0 6px 6px 0;
border-radius: 999px; background: #f4efdc; color: #14302c; font-size: .82rem; font-weight: 600; text-decoration: none;
}
/* ---------------------------------------------------------------------------
VALORACIÓN Y COMENTARIOS (wpDiscuz) con el diseño de la maqueta.
wpDiscuz está fuera del contenido (lo pinta la plantilla), así que no hereda
los tokens del plugin: se declaran aquí. Se usan #ids para ganar a los
estilos de wpDiscuz sin tocar su configuración.
--------------------------------------------------------------------------- */
body.rbr-entrada #comments.comments-area {
--k-pine: #2d5a54; --k-pine-900: #14302c; --k-pine-100: #dfeae6;
--k-cream: #fdfcf0; --k-paper: #fffef7; --k-sand: #f4efdc; --k-sand-2: #ebe3c8;
--k-sun: #f39c12; --k-sun-ink: #b06400; --k-ink: #1a1a1a; --k-ink-2: #3b3b3b; --k-muted: #5f5f58;
--k-line: rgba(26, 26, 26, .11);
--k-display: "Fraunces", Georgia, serif; --k-body: "Inter", system-ui, sans-serif;
margin-top: clamp(40px, 6vw, 72px); margin-bottom: clamp(48px, 7vw, 88px);
padding: clamp(22px, 4vw, 40px) !important; /* wpDiscuz lo pone a 0 en móvil */
background: var(--k-paper); border: 1px solid var(--k-line); border-radius: 28px;
box-shadow: 0 1px 2px rgba(20, 48, 44, .06), 0 2px 8px rgba(20, 48, 44, .06);
font-family: var(--k-body); color: var(--k-ink-2);
}
body.rbr-entrada #comments #wpdcom { width: auto; max-width: none; margin: 0; padding: 0; background: transparent; font-family: var(--k-body); }
/* Valoración: número grande + estrellas naranjas + votos */
body.rbr-entrada #comments #wpd-post-rating { justify-content: flex-start; margin: 0 0 22px; padding: 0 0 22px; border-bottom: 1px solid var(--k-line); }
body.rbr-entrada #comments #wpd-post-rating .wpd-rating-wrap { display: flex; align-items: center; justify-content: flex-start; gap: 16px; margin: 0; padding: 0; }
body.rbr-entrada #comments #wpd-post-rating :is(.wpd-rating-left, .wpd-rating-right) { display: none; }
body.rbr-entrada #comments #wpd-post-rating .wpd-rating-data { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 6px 18px; width: auto; margin: 0; padding: 0; text-align: left; }
body.rbr-entrada #comments #wpd-post-rating .wpd-rating-value :is(.wpdrc, .wpdrt) { display: inline !important; }
body.rbr-entrada #comments #wpd-post-rating .wpd-rating-value {
display: flex; align-items: baseline; gap: 6px; width: auto; height: auto; margin: 0; padding: 0;
border: 0; border-radius: 0; background: transparent; box-shadow: none; line-height: 1;
}
body.rbr-entrada #comments #wpd-post-rating .wpd-rating-value .wpdrv { font-family: var(--k-display); font-size: 2.6rem; font-weight: 400; color: var(--k-pine-900); line-height: 1; }
body.rbr-entrada #comments #wpd-post-rating .wpd-rating-value :is(.wpdrc, .wpdrt) { font-size: .84rem; font-weight: 500; color: var(--k-muted); }
body.rbr-entrada #comments #wpd-post-rating .wpd-rating-title {
order: -1; flex-basis: 100%; margin: 0; padding: 0;
font-size: .76rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--k-pine);
}
/* Dos filas de estrellas: la de la nota media (.wpd-rating-stars) y la de votar (.wpd-rate-starts).
Si el visitante aún no ha votado (.wpd-not-rated), al pasar el ratón se cambia una por otra. */
body.rbr-entrada #comments #wpd-post-rating .wpd-rating-stars,
body.rbr-entrada #comments #wpd-post-rating .wpd-rate-starts { display: flex; gap: 4px; margin: 0; }
body.rbr-entrada #comments #wpd-post-rating .wpd-rate-starts { display: none; cursor: pointer; }
body.rbr-entrada #comments #wpd-post-rating.wpd-not-rated .wpd-rating-data:hover .wpd-rating-stars { display: none; }
body.rbr-entrada #comments #wpd-post-rating.wpd-not-rated .wpd-rating-data:hover .wpd-rate-starts { display: flex; }
body.rbr-entrada #comments #wpd-post-rating :is(.wpd-rating-stars, .wpd-rate-starts) svg { width: 26px; height: 26px; margin: 0; transition: transform .2s cubic-bezier(.16, 1, .3, 1); }
body.rbr-entrada #comments #wpd-post-rating .wpd-rate-starts svg .wpd-star { fill: var(--k-sand-2); }
body.rbr-entrada #comments #wpd-post-rating .wpd-rate-starts:hover svg .wpd-star { fill: var(--k-sun); }
body.rbr-entrada #comments #wpd-post-rating .wpd-rate-starts svg:hover ~ svg .wpd-star { fill: var(--k-sand-2); }
body.rbr-entrada #comments #wpd-post-rating .wpd-rate-starts svg:hover { transform: scale(1.18) rotate(-8deg); }
/* Solo la estrella (cada icono lleva además un rectángulo de fondo transparente que no se debe pintar) */
body.rbr-entrada #comments #wpd-post-rating .wpd-rating-stars svg .wpd-star { fill: var(--k-sand-2); }
body.rbr-entrada #comments #wpd-post-rating .wpd-rating-stars svg .wpd-star.wpd-active { fill: var(--k-sun) !important; }
/* Cabecera del formulario: «Suscribir» como botón fantasma */
body.rbr-entrada #wpdcom .wpd-form-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; padding: 0; border: 0; }
body.rbr-entrada #wpdcom .wpd-sbs-toggle {
display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px;
border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--k-pine); color: var(--k-pine-900);
font-size: .86rem; font-weight: 600; cursor: pointer; transition: background .2s, color .2s;
}
body.rbr-entrada #wpdcom .wpd-sbs-toggle:hover { background: var(--k-pine); color: var(--k-cream); }
body.rbr-entrada #wpdcom .wpd-sbs-toggle :is(i, .wpd-sbs-title) { color: inherit; font-size: inherit; }
body.rbr-entrada #wpdcom .wpd-auth, body.rbr-entrada #wpdcom .wpd-login { font-size: .84rem; color: var(--k-muted); }
body.rbr-entrada #wpdcom .wpd-login a { color: var(--k-pine); font-weight: 600; }
/* Caja de comentario */
body.rbr-entrada #wpdcom .wpd-form .wpdiscuz-textarea-wrap { display: flex; gap: 12px; align-items: flex-start; padding: 0; border: 0; }
body.rbr-entrada #wpdcom .wpd-form .wpd-avatar img { width: 44px; height: 44px; border-radius: 50%; box-shadow: 0 0 0 1px var(--k-line); }
body.rbr-entrada #wpdcom .wpd-form [id^="wpd-editor-wraper"] { flex: 1; min-width: 0; border: 0; }
body.rbr-entrada #wpdcom .ql-container.ql-snow {
min-height: 96px; border: 1.5px solid var(--k-line) !important; border-radius: 18px 18px 0 0;
background: var(--k-cream); font-family: var(--k-body); font-size: 1rem; transition: border-color .2s, box-shadow .2s;
}
body.rbr-entrada #wpdcom .ql-container.ql-snow:focus-within { border-color: var(--k-pine) !important; box-shadow: 0 0 0 3px var(--k-pine-100); }
body.rbr-entrada #wpdcom .ql-editor { min-height: 92px; padding: 14px 18px; color: var(--k-ink); }
body.rbr-entrada #wpdcom .ql-editor.ql-blank::before { left: 18px; font-style: normal; color: #807f76; }
body.rbr-entrada #wpdcom .ql-toolbar.ql-snow {
border: 1.5px solid var(--k-line) !important; border-top: 0 !important; border-radius: 0 0 18px 18px;
background: var(--k-paper); padding: 6px 10px;
}
body.rbr-entrada #wpdcom .wpd-form-row :is(input[type="text"], input[type="email"], input[type="url"]) {
height: 46px; padding: 0 16px; border: 1.5px solid var(--k-line); border-radius: 999px; background: var(--k-cream); font-family: var(--k-body);
}
body.rbr-entrada #wpdcom .wpd-form-row :is(input[type="text"], input[type="email"], input[type="url"]):focus { border-color: var(--k-pine); outline: none; box-shadow: 0 0 0 3px var(--k-pine-100); }
body.rbr-entrada #wpdcom :is(.wpd-prim-button, .wc_comm_submit, input#wpdiscuz_subscription_button) {
min-height: 44px; padding: 0 22px; border: 0 !important; border-radius: 999px !important;
background: var(--k-pine) !important; color: var(--k-cream) !important;
font-family: var(--k-body); font-size: .92rem; font-weight: 600; letter-spacing: 0; box-shadow: none;
transition: background .2s, transform .2s cubic-bezier(.16, 1, .3, 1);
}
body.rbr-entrada #wpdcom :is(.wpd-prim-button, .wc_comm_submit):hover { background: var(--k-pine-900) !important; }
body.rbr-entrada #wpdcom :is(.wpd-prim-button, .wc_comm_submit):active { transform: scale(.97); }
/* Cabecera del hilo: «4 COMENTARIOS» + orden */
body.rbr-entrada #wpdcom .wpd-thread-head { display: flex; align-items: center; margin-top: 30px; padding-bottom: 12px; border-bottom: 1px solid var(--k-line); }
body.rbr-entrada #wpdcom .wpd-thread-head .wpd-thread-info {
margin: 0; padding: 0; border: 0 !important;
font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--k-pine);
}
body.rbr-entrada #wpdcom .wpd-thread-head .wpd-thread-info .wpdtc { margin-right: 4px; font-family: var(--k-display); font-size: 1.5rem; letter-spacing: 0; color: var(--k-pine-900); }
body.rbr-entrada #wpdcom .wpd-thread-filter .wpd-filter { border: 0; color: var(--k-muted); font-size: .86rem; }
body.rbr-entrada #wpdcom .wpd-thread-filter .wpd-filter:hover { color: var(--k-pine-900); }
body.rbr-entrada #wpdcom .wpdiscuz-sort-button { color: var(--k-muted); }
body.rbr-entrada #wpdcom .wpdiscuz-sort-button-active { color: var(--k-pine-900); font-weight: 600; }
/* Comentarios */
body.rbr-entrada #wpdcom .wpd-thread-list { padding: 0; }
body.rbr-entrada #wpdcom .wpd-thread-list > .comment { margin: 0; padding: 22px 0 0; }
body.rbr-entrada #wpdcom .wpd-thread-list > .comment + .comment { margin-top: 22px; border-top: 1px solid var(--k-line); }
body.rbr-entrada #wpdcom .wpd-comment-wrap { display: flex; gap: 12px; padding: 0; }
/* wpDiscuz ensancha la columna del avatar en las respuestas (width:100% en móvil): se fija a 44 px */
body.rbr-entrada #wpdcom .wpd-thread-list .wpd-comment-left { flex: 0 0 44px; width: 44px !important; max-width: 44px; padding: 0; text-align: left; }
body.rbr-entrada #wpdcom .wpd-thread-list .wpd-comment-right { flex: 1 1 auto; width: auto !important; min-width: 0; }
body.rbr-entrada #wpdcom .wpd-thread-list .wpd-comment-left .wpd-avatar { width: 44px; height: 44px; margin: 0; }
body.rbr-entrada #wpdcom .wpd-thread-list .wpd-comment-left .wpd-avatar img {
/* wpDiscuz saca el avatar de las respuestas a left:-70px con borde verde: se devuelve a su sitio */
position: static !important; left: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important;
width: 44px !important; height: 44px !important; border-radius: 50%; background: var(--k-pine-100); box-shadow: 0 0 0 1px var(--k-line);
}
body.rbr-entrada #wpdcom .wpd-thread-list .wpd-comment-left .wpd-avatar a { display: block; }
body.rbr-entrada #wpdcom .wpd-thread-list .wpd-follow-link { display: none !important; }
body.rbr-entrada #wpdcom .wpd-comment-right { flex: 1; min-width: 0; padding: 0; }
body.rbr-entrada #wpdcom .wpd-comment-header { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; padding: 0; }
body.rbr-entrada #wpdcom .wpd-comment-author, body.rbr-entrada #wpdcom .wpd-comment-author a { font-size: 1rem; font-weight: 600; color: var(--k-pine-900); text-decoration: none; }
body.rbr-entrada #wpdcom .wpd-comment-date { font-size: .8rem; color: var(--k-muted); }
body.rbr-entrada #wpdcom .wpd-comment-date i { display: none; }
body.rbr-entrada #wpdcom .wpd-reply-to { margin: 2px 0 0; font-size: .8rem; color: var(--k-muted); }
body.rbr-entrada #wpdcom .wpd-reply-to a { color: var(--k-pine); }
body.rbr-entrada #wpdcom .wpd-comment-text { margin-top: 8px; padding: 0; font-size: .98rem; line-height: 1.65; color: var(--k-ink-2); overflow-wrap: anywhere; }
body.rbr-entrada #wpdcom .wpd-comment-text p { margin: 0 0 .6em; }
body.rbr-entrada #wpdcom .wpd-comment-footer { display: flex; align-items: center; gap: 12px; margin-top: 4px; padding: 0; }
body.rbr-entrada #wpdcom .wpd-vote { display: inline-flex; align-items: center; gap: 4px; color: var(--k-muted); font-size: .84rem; }
body.rbr-entrada #wpdcom .wpd-vote svg { fill: var(--k-muted); }
body.rbr-entrada #wpdcom .wpd-reply-button {
display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px;
border-radius: 999px; color: var(--k-pine); font-size: .84rem; font-weight: 600; transition: background .2s;
}
body.rbr-entrada #wpdcom .wpd-reply-button:hover { background: var(--k-pine-100); }
body.rbr-entrada #wpdcom .wpd-reply-button svg { fill: var(--k-pine); }
/* Respuestas: sangría con línea y tarjeta crema para las del autor */
body.rbr-entrada #wpdcom .wpd-thread-list .comment .comment { margin: 14px 0 0 22px; padding: 0 0 0 18px; border-left: 2px solid var(--k-sand-2); }
@media (min-width: 640px) { body.rbr-entrada #wpdcom .wpd-thread-list .comment .comment { margin-left: 56px; } }
body.rbr-entrada #wpdcom .comment.bypostauthor > .wpd-comment-wrap { padding: 16px 18px; border-radius: 18px; background: var(--k-cream); }
body.rbr-entrada #wpdcom .wpd-comment-label {
display: inline-block; margin-top: 6px; padding: 2px 8px; border: 0; border-radius: 999px;
background: var(--k-sun); color: var(--k-ink); font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
body.rbr-entrada #wpdcom .wpd-comment-label span { color: inherit; }
/* Móvil: avatar a la altura del nombre y texto a todo el ancho; sangría de respuestas más corta */
@media (max-width: 639px) {
body.rbr-entrada #comments.comments-area { padding: 20px 16px !important; }
body.rbr-entrada #wpdcom .wpd-thread-list .wpd-comment-wrap { position: relative; display: block; }
body.rbr-entrada #wpdcom .wpd-thread-list .wpd-comment-left { position: absolute; left: 0; top: 0; }
body.rbr-entrada #wpdcom .comment.bypostauthor > .wpd-comment-wrap .wpd-comment-left { left: 14px; top: 14px; }
body.rbr-entrada #wpdcom .wpd-thread-list .wpd-comment-left .wpd-avatar,
body.rbr-entrada #wpdcom .wpd-thread-list .wpd-comment-left .wpd-avatar img { width: 36px !important; height: 36px !important; }
body.rbr-entrada #wpdcom .wpd-thread-list .wpd-comment-left .wpd-comment-label { position: absolute; left: 0; top: 42px; margin: 0; white-space: nowrap; }
body.rbr-entrada #wpdcom .wpd-thread-list .wpd-comment-header { min-height: 36px; padding-left: 46px; }
body.rbr-entrada #wpdcom .comment.bypostauthor > .wpd-comment-wrap .wpd-comment-header { padding-left: 46px; padding-bottom: 14px; }
body.rbr-entrada #wpdcom .wpd-thread-list .wpd-reply-to { padding-left: 0; }
body.rbr-entrada #wpdcom .wpd-thread-list .comment .comment { margin-left: 0; padding-left: 12px; }
body.rbr-entrada #wpdcom .comment.bypostauthor > .wpd-comment-wrap { padding: 14px; }
}
/* 1. VARIABLES E ICONOS ----------------------------------------------------- */
.rbr-shell--entrada {
--aside-w: 300px;
--measure: 800px;
--c-no: var(--c-sun-ink);
--ico-refresh: url("data:image/svg+xml;utf8,");
--ico-reloj: url("data:image/svg+xml;utf8,");
--ico-check-square: url("data:image/svg+xml;utf8,");
--ico-check-circle: url("data:image/svg+xml;utf8,");
--ico-x-circle: url("data:image/svg+xml;utf8,");
--ico-pin: url("data:image/svg+xml;utf8,");
--ico-aviso: url("data:image/svg+xml;utf8,");
--ico-consejo: url("data:image/svg+xml;utf8,");
}
/* Máscara de icono reutilizable */
.rbr-shell--entrada :is(.post-hero__meta li, .quick-answer__label, .stamp)::before {
content: ""; flex: none; display: inline-block; width: 18px; height: 18px; background: currentColor;
-webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}
/* 2. REVELADOS (entrada.js marca los bloques y los hace aparecer) ------------ */
html.js:not(.rbr-safe) .rbr-shell--entrada [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(28px); }
.rbr-shell--entrada [data-reveal] {
transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
transition-delay: calc(var(--i, 0) * 90ms);
}
/* Aparición de la cabecera con CSS puro (sin esperar a rbr-home.js): el texto de la respuesta rápida es el LCP en móvil */
html.js:not(.rbr-safe) .rbr-shell--entrada :is(.post-hero__eyebrow, .post-hero__lead, .post-hero__meta, .post-hero__answer) { animation: hero-in .9s var(--ease-out) both; }
html.js:not(.rbr-safe) .rbr-shell--entrada .post-hero__eyebrow { animation-delay: .05s; }
html.js:not(.rbr-safe) .rbr-shell--entrada .post-hero__lead { animation-delay: .3s; }
html.js:not(.rbr-safe) .rbr-shell--entrada .post-hero__meta { animation-delay: .4s; }
html.js:not(.rbr-safe) .rbr-shell--entrada .post-hero__answer { animation-delay: .5s; }
@keyframes hero-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.rbr-shell--entrada .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
/* Palabras del titular: animación CSS propia (el servidor ya las envuelve; no espera a rbr-home.js) */
.rbr-shell--entrada .w__i { display: inline-block; animation: word-in 1.1s var(--ease-out) both; animation-delay: calc(.12s + var(--wi, 0) * 45ms); }
@keyframes word-in { from { transform: translateY(105%); } to { transform: none; } }
.rbr-shell--entrada {
/* 3. CABECERA DE LA ENTRADA ----------------------------------------------- */
.post-hero {
position: relative; isolation: isolate;
padding-top: calc(var(--header-h) + var(--admin-bar, 0px) + clamp(56px, 10vw, 120px));
color: var(--c-cream);
}
.post-hero__media {
position: absolute; inset: 0; z-index: -1; overflow: hidden; margin: 0;
background: var(--c-pine-900);
border-radius: 0 0 clamp(24px, 4vw, 44px) clamp(24px, 4vw, 44px);
}
.post-hero__media img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 45%; transform: scale(1.04); }
.post-hero__media::after {
content: ""; position: absolute; inset: 0;
background:
radial-gradient(120% 90% at 0% 100%, rgba(14, 34, 31, .92) 0%, rgba(14, 34, 31, 0) 60%),
linear-gradient(180deg, rgba(20, 48, 44, .55) 0%, rgba(20, 48, 44, .35) 30%, rgba(14, 34, 31, .9) 100%);
}
.post-hero__content { position: relative; }
.post-hero__eyebrow {
display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px;
border-radius: 999px; background: var(--c-sun); color: var(--c-ink);
font-size: .72rem; letter-spacing: .16em; line-height: 1.2;
}
.post-hero__eyebrow strong { font-weight: 700; }
.post-hero__title {
display: block; margin: 20px 0 0; max-width: 22ch;
font-family: var(--f-display); font-weight: 400;
font-variation-settings: "opsz" 96, "SOFT" 50;
font-size: clamp(2.15rem, 5.2vw, 4.1rem); line-height: 1.03; letter-spacing: -.022em;
color: var(--c-cream); text-wrap: balance;
}
.post-hero__title em { font-style: italic; font-weight: 350; color: var(--c-sun); }
.post-hero__lead {
margin-top: 20px; max-width: 54ch;
font-size: clamp(1.02rem, 1.4vw, 1.2rem); line-height: 1.6; color: rgba(253, 252, 240, .86);
}
.post-hero__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; padding: 0; }
.post-hero__meta li {
display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px; margin: 0;
border-radius: 999px; font-size: .86rem; font-weight: 500; color: var(--c-cream); cursor: default;
background: rgba(253, 252, 240, .12); border: 1px solid rgba(253, 252, 240, .26);
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
transition: transform var(--t-med) var(--ease-out), background var(--t-med), border-color var(--t-med), box-shadow var(--t-med);
}
.post-hero__meta li::before { color: var(--c-sun); transition: transform .7s var(--ease-out); }
.post-hero__meta li:nth-child(1) { --ico: var(--ico-refresh); }
.post-hero__meta li:nth-child(2) { --ico: var(--ico-reloj); }
.post-hero__meta li:nth-child(3) { --ico: var(--ico-check-square); }
@media (hover: hover) {
.post-hero__meta li:hover {
transform: translateY(-3px);
background: rgba(253, 252, 240, .2); border-color: rgba(243, 156, 18, .75);
box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .55), 0 0 0 3px rgba(243, 156, 18, .14);
}
.post-hero__meta li:nth-child(1):hover::before { transform: rotate(360deg); }
.post-hero__meta li:nth-child(2):hover::before { animation: meta-tick .8s var(--ease-out); }
.post-hero__meta li:nth-child(3):hover::before { animation: meta-pop .6s var(--ease-out); }
}
/* 4. RESPUESTA RÁPIDA ------------------------------------------------------ */
/* Aire bajo la tarjeta para que se vea la foto (más generoso en móvil) */
.post-hero__answer { position: relative; z-index: 2; margin-top: clamp(36px, 5vw, 56px); padding-bottom: clamp(56px, 7vw, 76px); }
.quick-answer {
--qa-r: var(--r-lg);
display: grid; margin: 0; color: var(--c-ink);
border-radius: var(--qa-r); box-shadow: var(--shadow-lg);
transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out);
}
.quick-answer__label {
position: relative; overflow: hidden; isolation: isolate;
display: flex; align-items: center; gap: 10px; margin: 0;
padding: 16px 22px; border-radius: var(--qa-r) var(--qa-r) 0 0;
background: linear-gradient(135deg, var(--c-pine) 0%, var(--c-pine-800) 100%); color: var(--c-cream);
font-size: .74rem; font-weight: 700; letter-spacing: .16em;
}
.quick-answer__label strong { font-weight: 700; }
.quick-answer__label::before { --ico: var(--ico-check-circle); color: var(--c-sun); transition: transform var(--t-med) var(--ease-out); }
.quick-answer__label::after {
content: ""; position: absolute; inset: 0; z-index: -1;
background: linear-gradient(110deg, transparent 30%, rgba(253, 252, 240, .16) 50%, transparent 70%);
transform: translateX(-110%);
}
.quick-answer__text {
margin: 0; padding: 20px 22px 24px; border-radius: 0 0 var(--qa-r) var(--qa-r); background: var(--c-paper);
font-size: clamp(1rem, 1.3vw, 1.12rem); line-height: 1.65; color: var(--c-ink-2);
}
@media (min-width: 900px) {
.quick-answer { grid-template-columns: 230px 1fr; }
.quick-answer__label {
flex-direction: column; align-items: flex-start; justify-content: center; gap: 12px;
padding: 28px; border-radius: var(--qa-r) 0 0 var(--qa-r);
}
.quick-answer__label::before { width: 30px; height: 30px; }
.quick-answer__text { padding: 28px 34px; display: flex; align-items: center; border-radius: 0 var(--qa-r) var(--qa-r) 0; }
}
@media (hover: hover) {
.quick-answer:hover { transform: translateY(-4px); box-shadow: 0 4px 10px rgba(20, 48, 44, .08), 0 38px 80px -22px rgba(0, 0, 0, .55); }
.quick-answer:hover .quick-answer__label::after { transform: translateX(110%); transition: transform 1s var(--ease-out); }
.quick-answer:hover .quick-answer__label::before { transform: rotate(-8deg) scale(1.12); }
}
/* 5. REJILLA + BARRA LATERAL ---------------------------------------------- */
.post-layout {
display: grid; gap: 56px; grid-template-columns: minmax(0, 1fr);
padding-top: clamp(48px, 7vw, 88px); padding-bottom: clamp(56px, 8vw, 96px);
}
.post-main { min-width: 0; }
@media (min-width: 1100px) {
.post-layout { grid-template-columns: minmax(0, var(--measure)) var(--aside-w); justify-content: space-between; gap: 64px; }
.post-aside { align-self: stretch; }
.post-aside__inner {
position: sticky; top: calc(var(--header-h) + var(--admin-bar, 0px) + 28px);
max-height: calc(100vh - var(--header-h) - var(--admin-bar, 0px) - 48px);
max-height: calc(100dvh - var(--header-h) - var(--admin-bar, 0px) - 48px);
overflow-y: auto; overscroll-behavior: contain;
padding: 4px 10px 24px 4px; margin: -4px -10px 0 -4px;
scrollbar-width: thin; scrollbar-color: rgba(45, 90, 84, .35) transparent;
}
.post-aside__inner::-webkit-scrollbar { width: 6px; }
.post-aside__inner::-webkit-scrollbar-thumb { background: rgba(45, 90, 84, .3); border-radius: 6px; }
.post-aside__inner::after {
content: ""; position: sticky; bottom: -24px; display: block; height: 40px; margin-top: -40px;
background: linear-gradient(180deg, rgba(253, 252, 240, 0), var(--c-cream)); pointer-events: none;
transition: opacity var(--t-med);
}
.post-aside__inner.is-end::after { opacity: 0; }
}
.post-aside { min-width: 0; }
.post-aside__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
@media (min-width: 640px) and (max-width: 1099px) {
.post-aside__inner { grid-template-columns: 1fr 1fr; align-items: start; }
.post-aside__inner > :is(.widget_custom_html, .widget_block:has(.adsbygoogle), .widget_block:has(.wp-block-latest-posts), .widget_block:has(.wp-block-search)) { grid-column: 1 / -1; }
}
.post-aside .widget { margin: 0; }
.post-aside .widget:has(.adsbygoogle) { min-height: 250px; text-align: center; }
.post-aside ins.adsbygoogle { max-width: 100%; }
.post-aside :is(.wp-block-kadence-image, figure) { margin: 0; }
.post-aside .wp-block-kadence-image a {
display: block; max-width: 332px; margin-inline: auto; overflow: hidden; border-radius: var(--r-md);
box-shadow: var(--shadow-md); transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out);
}
.post-aside .wp-block-kadence-image img { width: 100%; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; }
.post-aside .wp-block-kadence-image a:hover { transform: translateY(-4px) rotate(-.6deg); box-shadow: var(--shadow-lg); }
.post-aside .widget_block:has(.wp-block-latest-posts) > .wp-block-group,
.post-aside .widget_block:has(.wp-block-latest-posts):not(:has(> .wp-block-group)) {
padding: 20px; background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--r-md);
}
.post-aside :is(h2, .wp-block-heading) {
display: flex; align-items: center; gap: 12px; margin: 0 0 6px;
font-family: var(--f-body); font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--c-pine);
}
.post-aside :is(h2, .wp-block-heading)::before { content: ""; width: 28px; height: 2px; border-radius: 2px; background: currentColor; opacity: .7; }
.post-aside .wp-block-latest-posts { counter-reset: rec; margin: 0; padding: 0; list-style: none; }
.post-aside .wp-block-latest-posts li { counter-increment: rec; margin: 0; border-top: 1px solid var(--c-line); }
.post-aside .wp-block-latest-posts li:first-child { border-top: 0; }
.post-aside .wp-block-latest-posts a {
display: grid; grid-template-columns: 26px 1fr; gap: 8px; padding: 10px 0;
font-family: var(--f-display); font-size: .98rem; line-height: 1.3; color: var(--c-pine-900); text-decoration: none; transition: color var(--t-fast);
}
.post-aside .wp-block-latest-posts a::before { content: counter(rec, decimal-leading-zero); font-family: var(--f-body); font-size: .7rem; font-weight: 700; color: var(--c-sun-ink); padding-top: .25em; }
.post-aside .wp-block-latest-posts a:hover { color: var(--c-sun-ink); }
.post-aside .wp-block-search__label { display: block; margin-bottom: 8px; font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--c-pine); }
.post-aside .wp-block-search__inside-wrapper {
display: flex; align-items: center; padding: 5px; border-radius: 999px;
background: var(--c-paper); border: 1.5px solid var(--c-line); transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.post-aside .wp-block-search__inside-wrapper:focus-within { border-color: var(--c-pine); box-shadow: 0 0 0 3px var(--c-pine-100); }
.post-aside .wp-block-search__input { flex: 1 1 0; width: 0; min-width: 0; height: 42px; padding: 0 14px; border: 0; background: transparent; outline: none; box-shadow: none; }
.post-aside .wp-block-search__button {
height: 42px; margin: 0; padding: 0 16px; border: 0; border-radius: 999px;
background: var(--c-pine); color: var(--c-cream); font-size: .88rem; font-weight: 600; transition: background var(--t-fast);
}
.post-aside .wp-block-search__button:hover { background: var(--c-pine-900); }
/* 6. TIPOGRAFÍA DEL ARTÍCULO ---------------------------------------------- */
.prose { counter-reset: sec; font-size: 1.0625rem; line-height: 1.75; color: var(--c-ink-2); container-type: inline-size; }
:is(.prose, .prose > .wp-block-group__inner-container) > * + * { margin-top: 1.1em; }
:is(.prose, .prose > .wp-block-group__inner-container) > :first-child { margin-top: 0; }
.prose strong { color: var(--c-ink); font-weight: 600; }
.prose :is(p, li, figcaption, td) a:not(.btn, .anchor, .wp-block-button__link) {
color: var(--c-pine); font-weight: 500;
text-decoration: underline; text-decoration-color: rgba(243, 156, 18, .6);
text-decoration-thickness: 2px; text-underline-offset: 4px;
transition: color var(--t-fast), text-decoration-color var(--t-fast);
}
.prose :is(p, li, figcaption, td) a:not(.btn, .anchor, .wp-block-button__link):hover { color: var(--c-pine-900); text-decoration-color: var(--c-sun); }
.prose a strong { color: inherit; }
.prose__intro { font-size: clamp(1.1rem, 1.5vw, 1.24rem); line-height: 1.7; color: var(--c-ink); }
.prose__intro::first-letter {
float: left; margin: .06em .12em 0 0;
font-family: var(--f-display); font-weight: 500; font-size: 3.6em; line-height: .82; color: var(--c-sun-ink);
}
.prose h2 {
counter-increment: sec;
margin: clamp(64px, 8vw, 104px) 0 0;
font-family: var(--f-display); font-weight: 400;
font-variation-settings: "opsz" 72, "SOFT" 50;
font-size: clamp(1.8rem, 3.4vw, 2.55rem); line-height: 1.1; letter-spacing: -.018em;
/* pretty (no balance): usa todo el ancho y solo evita dejar una palabra sola en la última línea */
color: var(--c-pine-900); text-wrap: pretty;
}
.prose h2::before {
content: counter(sec, decimal-leading-zero);
display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
font-family: var(--f-body); font-size: .76rem; font-weight: 700; letter-spacing: .16em; color: var(--c-sun-ink);
}
:is(.prose, .prose > .wp-block-group__inner-container) > h2 + * { margin-top: 20px; }
.prose h3 {
margin: 2.4em 0 0;
font-family: var(--f-display); font-weight: 450;
font-size: clamp(1.35rem, 2.2vw, 1.65rem); line-height: 1.2; letter-spacing: -.01em;
color: var(--c-pine-900); text-wrap: pretty;
}
:is(.prose, .prose > .wp-block-group__inner-container) > h3 + * { margin-top: 14px; }
:is(h2, h3)[id] { scroll-margin-top: calc(var(--header-h) + 36px); }
.anchor {
display: inline-grid; place-items: center; width: 32px; height: 32px; margin-left: 6px; vertical-align: middle;
border-radius: 50%; color: var(--c-pine); opacity: 0; transform: scale(.8);
transition: opacity var(--t-fast), transform var(--t-fast) var(--ease-out), background var(--t-fast);
}
.anchor .icon { width: 18px; height: 18px; }
.anchor:hover { background: var(--c-pine-100); }
:is(h2, h3):hover .anchor, .anchor:focus-visible { opacity: 1; transform: none; }
@media (hover: none) { .anchor { display: none; } }
/* 7. ÍNDICE ---------------------------------------------------------------- */
.toc {
margin-top: 36px; padding: 22px 22px 18px;
background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
}
.toc__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.toc__title { display: flex; align-items: center; gap: 10px; margin: 0; font-family: var(--f-display); font-size: 1.3rem; color: var(--c-pine-900); }
.toc__title .icon { color: var(--c-sun-ink); }
.toc__count { flex: none; white-space: nowrap; font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted); }
.toc__list { counter-reset: toc; position: relative; margin: 0; padding: 0; }
.toc__list li { margin: 0; }
.toc__list > li { counter-increment: toc; border-top: 1px solid var(--c-line); }
.toc__list a {
display: flex; gap: 14px; align-items: baseline; padding: 10px 6px;
color: var(--c-ink-2); text-decoration: none; font-size: .98rem; line-height: 1.4;
border-radius: 10px; transition: color var(--t-fast), background var(--t-fast);
}
.toc__list > li > a::before { content: counter(toc, decimal-leading-zero); flex: none; font-size: .74rem; font-weight: 700; letter-spacing: .08em; color: var(--c-sun-ink); }
.toc__list ol { margin: -4px 0 8px 40px; padding: 0; border-left: 2px solid var(--c-sand-2); }
.toc__list ol a { padding: 6px 12px; font-size: .92rem; color: var(--c-muted); }
.toc__list a:hover { color: var(--c-pine-900); background: var(--c-sand); }
.toc__list a.is-active { color: var(--c-pine-900); font-weight: 600; }
.toc__list ol a.is-active { box-shadow: inset 2px 0 0 var(--c-sun); margin-left: -2px; }
.toc.is-collapsible .toc__list { overflow: hidden; transition: max-height var(--t-slow) var(--ease-out); }
.toc.is-collapsed .toc__list { max-height: 16.5rem; -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent); mask-image: linear-gradient(180deg, #000 60%, transparent); }
.toc__more {
display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 6px; padding: 0 16px;
border: 0; border-radius: 999px; background: var(--c-sand); color: var(--c-pine-900); font-size: .9rem; font-weight: 600; transition: background var(--t-fast);
}
.toc__more:hover { background: var(--c-sand-2); }
.toc__more .icon { transition: transform var(--t-med) var(--ease-out); }
.toc__more[aria-expanded="true"] .icon { transform: rotate(180deg); }
.toc-fab {
position: fixed; left: 16px; bottom: 16px; z-index: 65;
display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px 0 14px;
border: 0; border-radius: 999px; background: var(--c-pine-900); color: var(--c-cream); box-shadow: var(--shadow-lg);
font-size: .9rem; font-weight: 600;
opacity: 0; transform: translateY(24px); pointer-events: none;
transition: opacity var(--t-med), transform var(--t-med) var(--ease-out), background var(--t-fast);
}
.toc-fab.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.toc-fab:hover { background: var(--c-pine); }
.toc-fab .icon { color: var(--c-sun); transition: transform var(--t-med) var(--ease-out); }
.toc-fab:hover .icon { transform: scale(1.15); }
@media (min-width: 640px) { .toc-fab { left: 30px; bottom: 30px; } }
.toc-sheet {
width: min(100% - 16px, 560px); max-width: none; max-height: min(78vh, 720px);
margin: auto auto 8px; padding: 0; border: 0; border-radius: 26px;
background: var(--c-paper); color: var(--c-ink); box-shadow: var(--shadow-lg); overflow: hidden;
}
.toc-sheet[open] { display: flex; flex-direction: column; animation: sheet-in var(--t-med) var(--ease-out); }
.toc-sheet::backdrop { background: rgba(14, 34, 31, .5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
@media (min-width: 640px) { .toc-sheet { margin: auto; } }
.toc-sheet__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 10px 10px 24px; border-bottom: 1px solid var(--c-line); }
.toc-sheet__title { margin: 0; font-family: var(--f-display); font-size: 1.35rem; color: var(--c-pine-900); }
.toc-sheet__body { overflow-y: auto; padding: 8px 18px 20px; overscroll-behavior: contain; }
.toc-sheet__body .toc__list > li:first-child { border-top: 0; }
/* 8. IMÁGENES -------------------------------------------------------------- */
.prose .wp-block-image { margin-block: 36px 0; }
:is(.prose, .prose > .wp-block-group__inner-container) > .wp-block-image + * { margin-top: 36px; }
.media__frame {
position: relative; display: block; overflow: hidden; border-radius: var(--r-md);
background: var(--c-sand); box-shadow: var(--shadow-md);
}
.prose .wp-block-image img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0; transition: transform 1.2s var(--ease-out); }
.prose .wp-block-image:not(:has(.media__frame)) img { border-radius: var(--r-md); box-shadow: var(--shadow-md); }
.prose .is-style-rbr-diagrama .media__frame, .prose .is-style-rbr-diagrama:not(:has(.media__frame)) img { background: #fff; }
.prose .is-style-rbr-diagrama img { object-fit: contain; }
.prose .wp-block-image.is-tira img { aspect-ratio: auto; }
.media__zoom { position: absolute; inset: 0; width: 100%; border: 0; padding: 0; background: transparent; cursor: zoom-in; }
.media__zoom-hint {
position: absolute; right: 12px; bottom: 12px;
display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px;
border-radius: 999px; background: rgba(20, 48, 44, .82); color: var(--c-cream);
font-size: .78rem; font-weight: 600; opacity: 0; transform: translateY(6px);
transition: opacity var(--t-med), transform var(--t-med) var(--ease-out);
}
@media (hover: hover) {
.media__frame:hover img { transform: scale(1.035); }
.is-style-rbr-diagrama .media__frame:hover img { transform: none; }
.media__frame:hover .media__zoom-hint, .media__zoom:focus-visible .media__zoom-hint { opacity: 1; transform: none; }
}
@media (hover: none) { .media__zoom-hint { opacity: 1; transform: none; } }
.prose .wp-block-image figcaption, .prose .wp-block-image .wp-element-caption {
margin: 12px 0 0; text-align: center;
font-family: var(--f-display); font-style: italic; font-size: 1rem; line-height: 1.45; color: var(--c-muted);
}
/* 9. TABLA COMPARATIVA (estilo «Comparativa») ------------------------------ */
.wp-block-table.is-style-rbr-compara { margin-block: 28px 32px; overflow: visible; }
.is-style-rbr-compara table { width: 100%; border-collapse: separate; border-spacing: 0; border: 0; font-size: .95rem; line-height: 1.45; table-layout: auto; }
.is-style-rbr-compara :is(th, td) { border: 0; }
.is-style-rbr-compara thead { border: 0; }
.is-style-rbr-compara strong { font-weight: 600; }
@container (max-width: 719px) {
.is-style-rbr-compara :is(table, tbody) { display: block; }
.is-style-rbr-compara thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.is-style-rbr-compara tbody { display: grid; gap: 16px; }
.is-style-rbr-compara tbody tr { display: grid; grid-template-columns: 1fr 1fr; background: var(--c-paper); border-radius: 20px; box-shadow: var(--shadow-md); overflow: hidden; }
.is-style-rbr-compara tbody td { display: block; padding: 10px 20px; color: var(--c-ink-2); }
.is-style-rbr-compara tbody td:first-child {
grid-column: 1 / -1; padding: 18px 20px 6px; text-align: left;
font-family: var(--f-display); font-size: 1.35rem; color: var(--c-pine-900);
}
.is-style-rbr-compara tbody td:first-child strong { font-weight: 500; color: inherit; }
.is-style-rbr-compara tbody td:not(:first-child)::before {
content: attr(data-label); display: block; margin-bottom: 2px;
font-family: var(--f-body); font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--c-muted);
}
.is-style-rbr-compara tbody td:nth-child(3) { order: 1; }
.is-style-rbr-compara tbody td:nth-child(5) { order: 2; }
.is-style-rbr-compara tbody td:nth-child(4) { order: 3; }
.is-style-rbr-compara tbody td:nth-child(6) { order: 4; }
.is-style-rbr-compara tbody td:nth-child(2) {
order: 5; grid-column: 1 / -1; margin-top: 8px; padding: 16px 20px 18px;
border-top: 2px dashed var(--c-sand-2);
background:
radial-gradient(circle at 0 0, var(--c-cream) 11px, transparent 11.5px),
radial-gradient(circle at 100% 0, var(--c-cream) 11px, transparent 11.5px),
var(--c-sun-50);
font-family: var(--f-display); font-size: 1.3rem; color: var(--c-pine-900);
}
.is-style-rbr-compara tbody td:nth-child(2)::before { color: var(--c-sun-ink); }
.is-style-rbr-compara tbody td:nth-child(2) strong { font-weight: 500; color: inherit; }
.is-style-rbr-compara tbody td:nth-child(5) strong { color: var(--c-sun-ink); }
}
@container (min-width: 720px) {
.wp-block-table.is-style-rbr-compara { overflow: clip; border-radius: 22px; background: var(--c-paper); box-shadow: var(--shadow-md); border: 1px solid var(--c-line); }
.is-style-rbr-compara thead :is(th, td) {
position: sticky; top: 0; z-index: 1; padding: 16px 14px; text-align: left; vertical-align: bottom;
background: var(--c-pine-900); color: var(--c-cream); font-size: .68rem; font-weight: 700; letter-spacing: .14em;
}
.is-style-rbr-compara thead :is(th, td):first-child { padding-left: 22px; }
.is-style-rbr-compara tbody td { padding: 16px 14px; text-align: left; vertical-align: top; border-top: 1px solid var(--c-line); transition: background var(--t-fast); }
.is-style-rbr-compara tbody td:first-child { padding-left: 22px; min-width: 11.5em; font-family: var(--f-display); font-size: 1.08rem; color: var(--c-pine-900); }
.is-style-rbr-compara tbody td:first-child strong { font-weight: 500; color: inherit; }
.is-style-rbr-compara tbody td:nth-child(2) strong { display: inline-block; padding: 4px 10px; border-radius: 10px; background: var(--c-sun-50); color: var(--c-pine-900); font-weight: 700; font-size: .92rem; }
.is-style-rbr-compara tbody td:nth-child(5) strong { color: var(--c-sun-ink); }
.is-style-rbr-compara tbody td:nth-child(6) { color: var(--c-muted); }
.is-style-rbr-compara tbody tr:hover > * { background: #fbf6e4; }
.is-style-rbr-compara tbody tr:hover > td:first-child { color: var(--c-sun-ink); }
}
/* 9b. TABLA COMPARATIVA DOBLE (Grupo «compara-dual»): dos .is-style-rbr-compara,
una por aeropuerto, unidas con una pestaña de color a modo de billete/tarjeta de
embarque. Cada pestaña usa el mismo código de color que las badges HVL-1/HVL-9
de la sección 12 (verde pino = IST, naranja = SAW) para que se lean como un par. */
.compara-dual { display: grid; gap: 32px; margin-block: 28px 32px; }
@media (min-width: 900px) { .compara-dual { grid-template-columns: 1fr 1fr; align-items: start; gap: 24px; } }
.compara-dual__group { min-width: 0; container-type: inline-size; }
.compara-dual__tag {
display: inline-flex; align-items: baseline; gap: 8px; margin: 0 0 -1px; padding: 11px 20px;
border-radius: 16px 16px 0 0; font-family: var(--f-display); font-size: 1.15rem; font-weight: 500; color: var(--c-cream);
position: relative; z-index: 1;
}
.compara-dual__tag strong { font-weight: 600; }
.compara-dual__tag small { font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.compara-dual__group--ist .compara-dual__tag { background: linear-gradient(135deg, var(--c-pine) 0%, var(--c-pine-800) 100%); }
.compara-dual__group--saw .compara-dual__tag { background: linear-gradient(135deg, #ffb238 0%, var(--c-sun) 60%, var(--c-sun-600) 100%); color: var(--c-ink); }
.compara-dual__group .wp-block-table.is-style-rbr-compara { margin: 0; }
@container (min-width: 720px) { .compara-dual__group .wp-block-table.is-style-rbr-compara { border-radius: 0 20px 20px 20px; } }
/* 10. AVISOS Y CONSEJOS (estilos de Grupo «Aviso» y «Consejo») -------------- */
:is(.is-style-rbr-aviso, .is-style-rbr-consejo) {
display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; align-items: start;
margin-block: 32px 0; padding: 20px 22px 22px; border-radius: var(--r-md); font-size: .99rem; line-height: 1.65;
}
:is(.prose, .prose > .wp-block-group__inner-container) > :is(.is-style-rbr-aviso, .is-style-rbr-consejo) + * { margin-top: 32px; }
:is(.is-style-rbr-aviso, .is-style-rbr-consejo)::before {
content: ""; grid-column: 1; grid-row: 1 / span 6; width: 44px; height: 44px; border-radius: 50%;
background: var(--ico-consejo) center / 22px no-repeat, var(--c-pine);
transform: rotate(-8deg); transition: transform var(--t-med) var(--ease-out);
}
.is-style-rbr-aviso::before { background: var(--ico-aviso) center / 22px no-repeat, var(--c-sun); }
.is-style-rbr-consejo::before { box-shadow: 0 0 0 3px var(--c-pine-100), 0 0 0 4.5px var(--c-pine); }
:is(.is-style-rbr-aviso, .is-style-rbr-consejo):hover::before { transform: rotate(0) scale(1.06); }
:is(.is-style-rbr-aviso, .is-style-rbr-consejo) :is(p, ul, ol) { grid-column: 2; margin: 0; }
:is(.is-style-rbr-aviso, .is-style-rbr-consejo) :is(p, ul, ol) + :is(p, ul, ol) { margin-top: 6px; }
:is(.is-style-rbr-aviso, .is-style-rbr-consejo) p:first-of-type { font-size: .74rem; letter-spacing: .15em; }
:is(.is-style-rbr-aviso, .is-style-rbr-consejo) p:first-of-type strong { font-weight: 700; color: inherit; }
.is-style-rbr-aviso { background: var(--c-sun-50); border: 1.5px dashed rgba(243, 156, 18, .6); }
.is-style-rbr-aviso p:first-of-type { color: var(--c-sun-ink); }
.is-style-rbr-consejo { background: var(--c-pine-100); }
.is-style-rbr-consejo p:first-of-type { color: var(--c-pine); }
/* 11. BOTONES --------------------------------------------------------------- */
.wp-block-buttons.cta-row { margin-block: 32px 0; }
.wp-block-buttons.cta-row.is-content-justification-center { flex-direction: column; align-items: center; text-align: center; }
.wp-block-buttons.cta-row .wp-block-button.btn > .wp-block-button__link.wp-element-button {
white-space: normal; text-align: center; min-height: 56px; padding: 12px 28px;
box-shadow: 0 10px 24px -12px rgba(176, 100, 0, .6);
}
.wp-block-buttons.cta-row .wp-block-button.btn > .wp-block-button__link.wp-element-button:hover { box-shadow: 0 16px 30px -12px rgba(176, 100, 0, .7); }
.cta-row__note { margin-top: 12px; text-align: center; font-family: var(--f-display); font-style: italic; font-size: 1.02rem; color: var(--c-muted); }
/* 12. LISTAS ---------------------------------------------------------------- */
.is-style-rbr-clave-valor { margin-block: 18px 0; padding: 0; border-top: 1px solid var(--c-line); }
.is-style-rbr-clave-valor li { position: relative; margin: 0; padding: 12px 0 12px 22px; border-bottom: 1px solid var(--c-line); line-height: 1.55; }
.is-style-rbr-clave-valor li::before {
content: ""; position: absolute; left: 2px; top: 1.2em; width: 8px; height: 8px; border-radius: 50%;
background: var(--c-sun); box-shadow: 0 0 0 3px var(--c-sun-50);
}
.is-style-rbr-clave-valor li > strong:first-child { color: var(--c-pine-900); }
/* Etiqueta en columna propia: flotante (no absoluta) para que la fila crezca
si la etiqueta ocupa dos líneas («Niños menores de 4 años:») */
@media (min-width: 600px) {
.is-style-rbr-clave-valor li:has(> strong:first-child) { display: flow-root; padding-left: calc(22px + 12.5rem + 18px); }
.is-style-rbr-clave-valor li > strong:first-child { float: left; width: 12.5rem; margin-left: calc(-12.5rem - 18px); }
}
.is-style-rbr-pasos { counter-reset: paso; display: grid; gap: 10px; margin-block: 18px 0; padding: 0; }
.is-style-rbr-pasos li {
counter-increment: paso; position: relative; margin: 0;
padding: 14px 16px 14px 60px; border-radius: 16px; background: var(--c-paper); border: 1px solid var(--c-line);
}
.is-style-rbr-pasos li::before {
content: counter(paso); position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
background: var(--c-pine); color: var(--c-cream); font-family: var(--f-display); font-size: 1.05rem;
}
.is-style-rbr-lineas { display: grid; gap: 12px; margin-block: 18px 0; padding: 0; }
@media (min-width: 600px) { .is-style-rbr-lineas { grid-template-columns: 1fr 1fr; } }
.is-style-rbr-lineas li {
position: relative; margin: 0; min-height: 90px; overflow: hidden;
padding: 22px 20px 20px 18px; line-height: 1.45;
background: var(--c-paper); border-radius: var(--r-md); box-shadow: var(--shadow-sm); border: 1px solid var(--c-line);
transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out);
}
.is-style-rbr-lineas li:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
/* Rejilla en vez de posición absoluta: antes el código se posicionaba con position:absolute
y el texto reservaba un hueco de ancho fijo (108px) calculado para 2 caracteres (A1, A2…).
Con códigos de 4 caracteres (HVL-1, HVL-9…) el badge medía ~100px y se comía las primeras
letras del texto. Con grid (auto = el ancho que pida el badge, minmax(0,1fr) = el resto)
el hueco se ajusta solo a cualquier longitud de código, sin overlap y sin tener que adivinar
un padding fijo. minmax(0, …) evita además que el texto largo desborde la tarjeta en móvil.
Mismo tamaño de letra que antes (1.5rem) y mismo min-width (58px): los códigos de 2
caracteres (A1/A2) miden exactamente igual que en la entrada 3030 ya publicada. */
.is-style-rbr-lineas code {
float: left; margin: 0 20px 8px 0;
display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
min-width: 58px; height: 58px; padding: 0 12px; border-radius: 16px;
background: var(--c-pine); color: var(--c-cream); font-family: var(--f-display); font-size: 1.5rem; font-weight: 600;
}
.is-style-rbr-lineas li:nth-child(even) code { background: var(--c-sun); color: var(--c-ink); }
.is-style-rbr-tarifas { display: grid; gap: 10px; margin-block: 18px 0; padding: 0; }
@media (min-width: 560px) { .is-style-rbr-tarifas { grid-template-columns: repeat(3, 1fr); } }
.is-style-rbr-tarifas li {
margin: 0; padding: 18px 20px; background: var(--c-paper); border-radius: var(--r-md); border: 1px solid var(--c-line);
font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--c-muted);
transition: transform var(--t-med) var(--ease-out), border-color var(--t-fast);
}
.is-style-rbr-tarifas li:hover { transform: translateY(-3px); border-color: var(--c-sun); }
.is-style-rbr-tarifas strong {
display: block; margin-top: 6px; text-transform: none; letter-spacing: 0;
font-family: var(--f-display); font-size: 1.45rem; font-weight: 500; line-height: 1.15; color: var(--c-pine-900);
}
/* 13. PREGUNTAS FRECUENTES (Grupo «faq» con bloques Detalles) -------------- */
details::details-content { block-size: 0; overflow: clip; transition: block-size var(--t-med) var(--ease-out), content-visibility var(--t-med) allow-discrete; }
details[open]::details-content { block-size: auto; }
.faq { margin-top: 20px; border-top: 1px solid var(--c-line); }
.faq .wp-block-details { margin: 0; padding: 0; border-bottom: 1px solid var(--c-line); }
.faq .wp-block-details summary {
position: relative; display: block; list-style: none; cursor: pointer;
padding: 20px 56px 20px 4px; font-family: var(--f-display); font-size: 1.14rem; line-height: 1.35; color: var(--c-pine-900);
transition: color var(--t-fast);
}
.faq .wp-block-details summary::-webkit-details-marker { display: none; }
.faq .wp-block-details summary strong { font-weight: 450; color: inherit; }
.faq .wp-block-details summary:hover { color: var(--c-sun-ink); }
.faq .wp-block-details summary::after {
content: ""; position: absolute; right: 4px; top: 50%; width: 36px; height: 36px; margin-top: -18px; border-radius: 50%;
background:
linear-gradient(var(--c-pine-900), var(--c-pine-900)) center / 14px 2px no-repeat,
linear-gradient(var(--c-pine-900), var(--c-pine-900)) center / 2px 14px no-repeat,
var(--c-sand);
transition: transform var(--t-med) var(--ease-out), background-color var(--t-fast);
}
.faq .wp-block-details[open] summary::after {
transform: rotate(180deg);
background:
linear-gradient(var(--c-pine-900), var(--c-pine-900)) center / 14px 2px no-repeat,
var(--c-sun);
}
.faq .wp-block-details > :not(summary) { margin: 0; padding: 0 56px 22px 4px; color: var(--c-ink-2); }
/* 14a. SELECTOR DE PERFIL (Grupo «Selector de perfiles») -------------------- */
.is-style-rbr-perfiles { display: grid; gap: 12px; margin-block: 28px 0; }
@media (min-width: 640px) { .is-style-rbr-perfiles:not(.is-ready) { grid-template-columns: 1fr 1fr; } }
.is-style-rbr-perfiles:not(.is-ready) > .wp-block-group, .is-style-rbr-perfiles:not(.is-ready) > .wp-block-group__inner-container > .wp-block-group {
padding: 20px 22px; background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--r-md);
}
.situ__panel p { margin: 0; }
.situ__who { display: flex; align-items: center; gap: 10px; font-family: var(--f-display); font-size: 1.1rem; line-height: 1.25; color: var(--c-pine-900); }
.situ__who strong { font-weight: 450; color: inherit; }
.situ__emoji { font-family: var(--f-body); font-size: 1.4rem; line-height: 1; }
.situ__pick { margin-top: 10px !important; color: var(--c-pine); }
.situ__pick strong { color: inherit; }
.situ__why { margin-top: 4px !important; font-size: .96rem; line-height: 1.55; color: var(--c-muted); }
.situ.is-ready { grid-template-columns: minmax(0, 1fr); gap: 0; overflow: hidden; background: var(--c-sand); border-radius: var(--r-lg); box-shadow: var(--shadow-md); }
@media (min-width: 720px) { .situ.is-ready { grid-template-columns: 272px minmax(0, 1fr); } }
/* Móvil: los 6 perfiles a la vista en una rejilla de 2 columnas (sin scroll horizontal) */
.situ__tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 12px; }
/* Fichas: emoji arriba y texto debajo (así caben textos largos sin partir palabras) */
@media (max-width: 719px) {
.situ__tabs .situ__tab {
flex-direction: column; justify-content: center; gap: 6px; min-height: 84px; padding: 10px 8px;
border-radius: 16px; font-size: .86rem; line-height: 1.2; text-align: center; hyphens: manual; overflow-wrap: normal;
}
.situ__tabs .situ__tab .situ__emoji { width: 32px; height: 32px; border-radius: 10px; font-size: 1.05rem; }
.situ__tabs .situ__tab[aria-selected="true"] { box-shadow: 0 8px 18px -10px rgba(20, 48, 44, .6); }
.situ.is-ready .situ__stage { min-height: 240px; }
}
@media (min-width: 720px) { .situ__tabs { display: flex; flex-direction: column; gap: 4px; padding: 14px 10px 14px 14px; } }
.situ__tab {
flex: none; display: flex; align-items: center; gap: 10px; min-width: 0;
min-height: 50px; padding: 6px 16px 6px 6px; border: 0; border-radius: 999px;
background: var(--c-paper); color: var(--c-pine-900);
font-family: var(--f-display); font-size: .98rem; line-height: 1.2; text-align: left;
transition: background var(--t-med) var(--ease-out), color var(--t-med), box-shadow var(--t-med), transform var(--t-fast) var(--ease-out);
}
@media (min-width: 720px) { .situ__tab { border-radius: 14px; background: transparent; } }
.situ__tab strong { font-weight: 450; color: inherit; }
.situ__tab .situ__emoji {
flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
background: var(--c-sand); font-size: 1.15rem; transition: transform var(--t-med) var(--ease-out), background var(--t-med);
}
@media (min-width: 720px) { .situ__tab .situ__emoji { border-radius: 11px; background: var(--c-paper); } }
.situ__tab:hover { background: rgba(255, 254, 247, .75); }
.situ__tab:hover .situ__emoji { transform: rotate(-8deg); }
.situ__tab:active { transform: scale(.98); }
.situ__tab[aria-selected="true"] { background: var(--c-pine-900); color: var(--c-cream); box-shadow: var(--shadow-md); }
.situ__tab[aria-selected="true"] .situ__emoji { background: rgba(253, 252, 240, .14); transform: rotate(-8deg) scale(1.06); }
.situ__stage {
position: relative; isolation: isolate; overflow: hidden;
display: grid; min-height: 280px; padding: clamp(26px, 4vw, 44px);
background:
radial-gradient(circle at 100% 0%, rgba(243, 156, 18, .28), transparent 45%),
radial-gradient(rgba(253, 252, 240, .09) 1px, transparent 1.6px) 0 0 / 18px 18px,
var(--c-pine-900);
color: var(--c-cream);
}
.situ.is-ready .situ__panel { grid-area: 1 / 1; display: flex; flex-direction: column; justify-content: flex-end; padding: 0; background: none; border: 0; border-radius: 0; }
.situ.is-ready .situ__panel > .wp-block-group__inner-container { display: contents; }
.situ.is-ready .situ__panel[hidden] { display: none; }
.situ.is-ready .situ__who { font-family: var(--f-body); font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--c-sun); }
.situ.is-ready .situ__who strong { font-weight: 700; }
.situ.is-ready .situ__who .situ__emoji { position: absolute; z-index: -1; right: -.12em; bottom: -.22em; font-size: clamp(8rem, 18vw, 12rem); opacity: .17; transform: rotate(-12deg); filter: saturate(.6); }
.situ.is-ready .situ__pick { margin-top: 14px !important; max-width: 18ch; font-family: var(--f-display); font-size: clamp(1.8rem, 3.4vw, 2.5rem); line-height: 1.06; letter-spacing: -.015em; color: var(--c-cream); text-wrap: balance; }
.situ.is-ready .situ__pick strong { font-weight: 400; }
.situ.is-ready .situ__why { margin-top: 14px !important; max-width: 42ch; font-size: 1.02rem; color: rgba(253, 252, 240, .82); }
.situ__panel.is-entering :is(.situ__who, .situ__pick, .situ__why) { animation: situ-in .6s var(--ease-out) both; }
.situ__panel.is-entering .situ__pick { animation-delay: .06s; }
.situ__panel.is-entering .situ__why { animation-delay: .12s; }
.situ__panel.is-entering .situ__who .situ__emoji { animation: situ-emoji .9s var(--ease-out) both; }
/* 14b. ABONOS (tabla «Abonos» → tarjetas con filtro) ----------------------- */
.wp-block-table.is-style-rbr-abonos { margin-block: 28px 0; }
.is-style-rbr-abonos table { border-collapse: separate; border-spacing: 0; border: 0; width: 100%; font-size: .92rem; }
.is-style-rbr-abonos :is(th, td) { border: 0; border-top: 1px solid var(--c-line); padding: 12px; text-align: center; }
.is-style-rbr-abonos thead :is(th, td) { background: var(--c-pine-900); color: var(--c-cream); font-size: .66rem; letter-spacing: .12em; }
.is-style-rbr-abonos tbody td:first-child { text-align: left; font-family: var(--f-display); color: var(--c-pine-900); }
.tcards { margin-block: 28px 0; }
.tcards__filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
.tcards__label { margin-right: 4px; font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--c-muted); }
.tcards__btn {
min-height: 40px; padding: 0 16px; border: 1.5px solid var(--c-line); border-radius: 999px;
background: var(--c-paper); color: var(--c-pine-900); font-size: .84rem; font-weight: 600; letter-spacing: .02em;
transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast) var(--ease-out);
}
.tcards__btn:hover { border-color: var(--c-pine); }
.tcards__btn:active { transform: scale(.96); }
.tcards__btn[aria-pressed="true"] { background: var(--c-pine-900); border-color: var(--c-pine-900); color: var(--c-cream); }
.tcards__result { min-height: 1.5em; margin: -6px 0 12px; font-family: var(--f-display); font-style: italic; color: var(--c-pine); }
.tcards__grid { display: grid; gap: 16px; margin: 0; padding: 0; }
@media (min-width: 560px) { .tcards__grid { grid-template-columns: 1fr 1fr; } }
.tcard {
display: flex; flex-direction: column; margin: 0; padding: 10px 10px 12px;
background: var(--c-paper); border: 1px solid var(--c-line); border-radius: 22px; box-shadow: var(--shadow-sm);
transition: opacity var(--t-med), filter var(--t-med), transform var(--t-med) var(--ease-out), box-shadow var(--t-med);
}
.tcard__face { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; justify-content: space-between; height: 128px; padding: 16px 18px; border-radius: 16px; transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med); }
.tcard__face::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 112% 130%, rgba(255, 255, 255, .16) 0 36%, transparent 36.5%), radial-gradient(circle at 112% 130%, rgba(255, 255, 255, .09) 0 56%, transparent 56.5%); }
.tcard__face::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .35) 50%, transparent 65%); transform: translateX(-120%); transition: transform .9s var(--ease-out); }
.tcard__kicker { font-size: .6rem; font-weight: 700; letter-spacing: .22em; opacity: .72; }
.tcard__chip { position: absolute; right: 18px; top: 16px; width: 34px; height: 26px; border-radius: 6px; background: linear-gradient(90deg, transparent 45%, rgba(0, 0, 0, .18) 45% 55%, transparent 55%), linear-gradient(0deg, transparent 45%, rgba(0, 0, 0, .18) 45% 55%, transparent 55%), linear-gradient(135deg, #ffc15a, var(--c-sun-600)); }
.tcard__name { margin: 0; font-family: var(--f-display); font-size: 1.6rem; line-height: 1; letter-spacing: -.01em; }
.tcard__name strong { font-weight: 500; color: inherit; }
.tcard--v0 .tcard__face { background: linear-gradient(135deg, var(--c-pine) 0%, var(--c-pine-900) 100%); color: var(--c-cream); }
.tcard--v1 .tcard__face { background: linear-gradient(135deg, #ffb238 0%, var(--c-sun) 50%, var(--c-sun-600) 100%); color: var(--c-ink); }
.tcard--v2 .tcard__face { background: linear-gradient(135deg, var(--c-pine-100) 0%, #c7dcd5 100%); color: var(--c-pine-900); }
.tcard--v3 .tcard__face { background: var(--c-cream); color: var(--c-ink); box-shadow: inset 0 0 0 1.5px var(--c-sand-2); }
.tcard--v3 .tcard__face::before { background: repeating-linear-gradient(90deg, transparent 0 10px, rgba(45, 90, 84, .05) 10px 11px); }
@media (hover: hover) {
.tcard:hover .tcard__face { transform: translateY(-4px) rotate(-1.2deg); box-shadow: var(--shadow-md); }
.tcard:hover .tcard__face::after { transform: translateX(120%); }
}
.tcard__uses { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 10px 0 0; padding: 0; }
.tcard__use { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 8px; min-height: 46px; margin: 0; padding: 7px 10px; border-radius: 12px; font-size: .68rem; font-weight: 700; letter-spacing: .06em; line-height: 1.25; transition: opacity var(--t-med), transform var(--t-med) var(--ease-out), box-shadow var(--t-med); }
.tcard__use .icon { grid-row: span 2; width: 20px; height: 20px; stroke-width: 2; }
.tcard__note { grid-column: 2; font-size: .72rem; font-weight: 500; letter-spacing: 0; color: var(--c-muted); }
.tcard__use.is-yes { background: var(--c-pine-100); color: var(--c-pine-900); }
.tcard__use.is-yes .icon { color: var(--c-pine); fill: rgba(255, 254, 247, .7); }
.tcard__use.is-no { border: 1px dashed rgba(176, 100, 0, .35); color: var(--c-muted); }
.tcard__use.is-no .icon { color: var(--c-sun-ink); }
.tcard__use.is-no .tcard__t { text-decoration: line-through; text-decoration-color: rgba(176, 100, 0, .55); text-decoration-thickness: 1.5px; }
.tcards.is-filtering .tcard__use:not(.is-focus) { opacity: .4; }
.tcard__use.is-focus { transform: scale(1.03); box-shadow: 0 0 0 2px currentColor; }
.tcard.is-dim { opacity: .55; filter: saturate(.25); }
.tcard.is-match { box-shadow: 0 0 0 2px var(--c-pine), var(--shadow-md); transform: translateY(-2px); }
/* 14c. BILLETE SÍ / NO (Grupo «Billete sí / no») --------------------------- */
.is-style-rbr-si-no { position: relative; display: grid; margin-block: 30px 0; background: var(--c-paper); border: 1px solid var(--c-line); border-radius: 22px; box-shadow: var(--shadow-md); }
:is(.prose, .prose > .wp-block-group__inner-container) > .is-style-rbr-si-no + * { margin-top: 24px; }
@media (min-width: 560px) { .is-style-rbr-si-no { grid-template-columns: 1fr 1fr; } }
.is-style-rbr-si-no .wp-block-group { position: relative; margin: 0; padding: 24px 22px 22px; }
.validator__half--yes { border-radius: 21px 21px 0 0; background: linear-gradient(160deg, var(--c-pine-100), rgba(223, 234, 230, .35)); }
.validator__half--no { border-radius: 0 0 21px 21px; background: var(--c-sun-50); border-top: 2px dashed var(--c-sand-2); }
.validator__half--no::before, .validator__half--no::after { content: ""; position: absolute; top: -12px; width: 22px; height: 22px; border-radius: 50%; background: var(--c-cream); box-shadow: inset 0 0 0 1px var(--c-line); }
.validator__half--no::before { left: -12px; }
.validator__half--no::after { right: -12px; }
@media (min-width: 560px) {
.validator__half--yes { border-radius: 21px 0 0 21px; }
.validator__half--no { border-radius: 0 21px 21px 0; border-top: 0; border-left: 2px dashed var(--c-sand-2); }
.validator__half--no::before { top: -12px; left: -12px; }
.validator__half--no::after { top: auto; bottom: -12px; right: auto; left: -12px; }
}
.is-style-rbr-si-no .wp-block-group > p:first-child, .is-style-rbr-si-no .wp-block-group__inner-container > p:first-child {
display: flex; align-items: center; gap: 10px; margin: 0;
font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--c-pine-900);
}
.validator__light { position: relative; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--c-pine); }
.validator__half--yes .validator__light::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(45, 90, 84, .55); animation: light-pulse 2.2s ease-out infinite; }
.validator__half--no .validator__light { background: var(--c-sun-ink); }
.is-style-rbr-si-no ul { display: grid; gap: 10px; margin: 16px 0 0; padding: 0; }
.is-style-rbr-si-no li { display: flex; align-items: center; gap: 10px; margin: 0; font-family: var(--f-display); font-size: 1.22rem; line-height: 1.2; color: var(--c-pine-900); }
.is-style-rbr-si-no li strong { font-weight: 450; color: inherit; }
.is-style-rbr-si-no li::before { content: ""; flex: none; width: 24px; height: 24px; background: var(--c-pine); -webkit-mask: var(--ico-check-circle) center / contain no-repeat; mask: var(--ico-check-circle) center / contain no-repeat; }
.validator__half--no li::before { background: var(--c-sun-ink); -webkit-mask-image: var(--ico-x-circle); mask-image: var(--ico-x-circle); }
.validator__half--no li strong { background: linear-gradient(var(--c-sun-ink), var(--c-sun-ink)) 0 56% / 0 2px no-repeat; transition: background-size .7s var(--ease-out) .5s; }
.validator__half--no li + li strong { transition-delay: .8s; }
.is-style-rbr-si-no.is-in .validator__half--no li strong { background-size: 100% 2px; }
.validator__stamp {
position: absolute; z-index: 2; right: 16px; top: -16px; margin: 0;
padding: 5px 12px; border: 2px solid var(--c-pine); border-radius: 8px; background: var(--c-paper); color: var(--c-pine);
font-family: var(--f-display); font-style: italic; font-size: .98rem; box-shadow: var(--shadow-sm);
transform: rotate(7deg); transition: transform var(--t-med) var(--ease-out);
}
.is-style-rbr-si-no:hover .validator__stamp { transform: rotate(0) scale(1.06); }
/* 14d. T-FAMILIAR: texto + billete ilustrado (Grupo «family») --------------- */
.family { display: grid; gap: 22px; align-items: center; }
@media (min-width: 640px) { .family { grid-template-columns: minmax(0, 1fr) 280px; gap: 32px; } }
.family > p, .family > .wp-block-group__inner-container > p { margin: 0; }
.family__pass { justify-self: center; width: 100%; max-width: 300px; padding: 10px 10px 14px; background: var(--c-paper); border: 1px solid var(--c-line); border-radius: 22px; box-shadow: var(--shadow-md); transform: rotate(2deg); transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med); }
.family:hover .family__pass { transform: rotate(0) translateY(-4px); box-shadow: var(--shadow-lg); }
.family__face { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; justify-content: space-between; height: 110px; padding: 14px 16px; border-radius: 16px; background: linear-gradient(135deg, var(--c-pine-100) 0%, #c7dcd5 100%); color: var(--c-pine-900); }
.family__face::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 112% 130%, rgba(255, 255, 255, .35) 0 36%, transparent 36.5%), radial-gradient(circle at 112% 130%, rgba(255, 255, 255, .2) 0 56%, transparent 56.5%); }
.family__kicker { font-size: .6rem; font-weight: 700; letter-spacing: .22em; opacity: .7; }
.family__chip { position: absolute; right: 16px; top: 14px; width: 32px; height: 24px; border-radius: 6px; background: linear-gradient(90deg, transparent 45%, rgba(0, 0, 0, .18) 45% 55%, transparent 55%), linear-gradient(0deg, transparent 45%, rgba(0, 0, 0, .18) 45% 55%, transparent 55%), linear-gradient(135deg, #ffc15a, var(--c-sun-600)); }
.family__name { font-family: var(--f-display); font-size: 1.55rem; font-weight: 500; line-height: 1; }
.family__row { display: grid; gap: 8px; padding: 12px 6px 0; }
.family__label { font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--c-muted); }
.family__holes { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.family__holes i { position: relative; aspect-ratio: 1; border-radius: 50%; background: var(--c-sun); box-shadow: inset 0 0 0 2px var(--c-sun-600); }
.family__holes i::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--c-paper); box-shadow: inset 0 0 0 2px var(--c-sand-2); opacity: 0; pointer-events: none; }
.family__people { display: flex; gap: 6px; }
.family__people svg { width: 34px; height: 34px; padding: 6px; border-radius: 50%; background: var(--c-pine); color: var(--c-cream); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; transition: opacity .5s var(--ease-out), transform .6s var(--ease-out); transition-delay: calc(1.2s + var(--n) * 110ms); }
.family__ok { display: flex; align-items: center; gap: 8px; margin: 14px 6px 0; padding-top: 12px; border-top: 2px dashed var(--c-sand-2); font-family: var(--f-display); font-size: 1.1rem; color: var(--c-pine-900); }
.family__ok svg { width: 18px; height: 18px; fill: none; stroke: var(--c-pine); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.family.is-in .family__holes i { animation: family-punch .45s var(--ease-out) both; animation-delay: calc(.5s + var(--n) * 90ms); }
.family.is-in .family__holes i::before { animation: family-punch-cover .45s var(--ease-out) both; animation-delay: calc(.5s + var(--n) * 90ms); }
/* 15. «SIGUE PLANIFICANDO» Y RELACIONADOS ---------------------------------- */
.next-guides { display: grid; gap: 28px; margin-top: 32px; }
@media (min-width: 640px) { .next-guides { grid-template-columns: 1fr 1fr; gap: 36px 24px; } }
.guide-card { position: relative; display: flex; flex-direction: column; margin: 0; }
.guide-card > .wp-block-group__inner-container { display: contents; }
.guide-card .wp-block-image { margin: 0; }
.guide-card .wp-block-image a { display: block; overflow: hidden; border-radius: var(--r-md); background: var(--c-sand); }
.guide-card .wp-block-image img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 0; box-shadow: none; transition: transform 1s var(--ease-out); }
.guide-card:first-child .wp-block-image img { object-position: 46% 2%; }
.guide-card:hover .wp-block-image img { transform: scale(1.06); }
.guide-card .stamp { margin: 0; pointer-events: none; }
.guide-card .stamp::before { --ico: var(--ico-pin); width: 12px; height: 12px; margin-bottom: 2px; background: var(--c-sun-ink); }
.guide-card .stamp strong { display: block; font-family: var(--f-display); font-size: 1.15rem; font-weight: 600; letter-spacing: 0; line-height: .9; }
@media (min-width: 640px) { .guide-card .stamp strong { font-size: 1.4rem; } }
.guide-card .stamp.stamp--wide { width: auto; height: auto; min-height: 40px; padding: 0 14px; border-radius: 999px; grid-auto-flow: column; gap: 6px; }
.guide-card .stamp.stamp--wide::before { margin: 0; }
.guide-card:hover .stamp { transform: rotate(0) scale(1.08); }
.guide-card__title { margin: 16px 0 0; font-family: var(--f-display); font-weight: 420; font-size: 1.45rem; line-height: 1.15; color: var(--c-pine-900); }
.guide-card__title a { color: inherit; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size var(--t-med) var(--ease-out); }
.guide-card:hover .guide-card__title a { background-size: 100% 1.5px; }
.guide-card__text { margin: 8px 0 0; flex: 1; font-size: .95rem; line-height: 1.6; color: var(--c-muted); }
.guide-card .link-arrow { margin: 8px 0 0; }
.related__title {
display: flex; align-items: center; gap: 12px; margin: clamp(64px, 8vw, 96px) 0 0;
font-family: var(--f-body); font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--c-pine);
}
.related__title::before { content: ""; width: 28px; height: 2px; border-radius: 2px; background: currentColor; opacity: .7; }
.wp-block-jetpack-related-posts { margin-top: 20px; }
.wp-block-jetpack-related-posts :is(.jp-related-posts-i2__list) { display: grid !important; grid-template-columns: 1fr 1fr; gap: 24px 16px; margin: 0; padding: 0; }
.wp-block-jetpack-related-posts .jp-related-posts-i2__row { display: contents !important; }
.wp-block-jetpack-related-posts .jp-related-posts-i2__post { margin: 0 !important; padding: 0 !important; list-style: none; }
.wp-block-jetpack-related-posts .jp-related-posts-i2__post-link { display: flex; flex-direction: column; gap: 10px; font-family: var(--f-display); font-size: 1.05rem; line-height: 1.25; color: var(--c-pine-900); text-decoration: none; transition: color var(--t-fast); }
.wp-block-jetpack-related-posts .jp-related-posts-i2__post-img { order: -1; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 14px; transition: transform 1s var(--ease-out); }
.wp-block-jetpack-related-posts .jp-related-posts-i2__post-link:hover { color: var(--c-sun-ink); }
.wp-block-jetpack-related-posts .jp-related-posts-i2__post-context { font-family: var(--f-body); font-size: .8rem; color: var(--c-muted); }
/* 16. ANUNCIOS --------------------------------------------------------------- */
.anuncio { margin-block: 40px 0; min-height: 90px; }
:is(.prose, .prose > .wp-block-group__inner-container) > .anuncio + * { margin-top: 40px; }
/* 17. VISOR DE IMÁGENES ----------------------------------------------------- */
.lightbox { width: min(100% - 16px, 1200px); max-width: none; max-height: 92vh; margin: auto; padding: 0; border: 0; border-radius: 20px; background: var(--c-paper); box-shadow: var(--shadow-lg); overflow: hidden; }
.lightbox[open] { animation: mega-in var(--t-med) var(--ease-out); }
.lightbox::backdrop { background: rgba(14, 34, 31, .78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.lightbox img { width: 100%; max-height: calc(92vh - 64px); object-fit: contain; background: #fff; }
.lightbox__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 6px 8px 6px 20px; }
.lightbox__cap { margin: 0; font-family: var(--f-display); font-style: italic; color: var(--c-muted); font-size: .98rem; }
/* Barra de progreso de lectura */
.read-progress { position: fixed; inset: calc(var(--admin-bar, 0px)) 0 auto; z-index: 60; height: 3px; pointer-events: none; }
.read-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--c-sun), #ffb238); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
}
/* 18. ANIMACIONES ------------------------------------------------------------- */
@keyframes meta-tick { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-18deg); } 55% { transform: rotate(14deg); } 80% { transform: rotate(-6deg); } }
@keyframes meta-pop { 0% { transform: scale(1); } 40% { transform: scale(1.35) rotate(-8deg); } 100% { transform: scale(1); } }
@keyframes qa-draw { from { opacity: 0; transform: scaleX(0); transform-origin: 0 50%; } to { opacity: 1; transform: scaleX(1); transform-origin: 0 50%; } }
@keyframes qa-beat { 50% { transform: scale(1.22) rotate(-8deg); } }
@keyframes qa-sheen { from { transform: translateX(-110%); } to { transform: translateX(110%); } }
@keyframes sheet-in { from { opacity: 0; transform: translateY(40px); } }
@keyframes situ-in { from { opacity: 0; transform: translateY(14px); } }
@keyframes situ-emoji { from { opacity: 0; transform: rotate(-30deg) scale(.6); } }
@keyframes light-pulse { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(3); opacity: 0; } }
@keyframes family-punch { 0% { transform: scale(1); } 45% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes family-punch-cover { from { opacity: 1; } to { opacity: 0; } }
.is-loaded .rbr-shell--entrada .quick-answer__label::before { animation: qa-draw 1.1s var(--ease-out) 1.2s both, qa-beat .6s var(--ease-out) 2.3s; }
.is-loaded .rbr-shell--entrada .quick-answer__label::after { animation: qa-sheen 1.4s var(--ease-out) 1.6s; }
@supports (animation-timeline: scroll()) {
.rbr-shell--entrada .read-progress span { animation: read-progress linear both; animation-timeline: scroll(root); }
@keyframes read-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: no-preference) {
html:not(.low-power) .rbr-shell--entrada .post-hero__media img { animation: post-hero-parallax linear both; animation-timeline: scroll(root); animation-range: 0 90vh; }
@keyframes post-hero-parallax { from { transform: scale(1.04); } to { transform: translateY(12%) scale(1.12); } }
}
}
html.js:not(.rbr-safe) .rbr-shell--entrada .family:not(.is-in) .family__holes i::before { opacity: 1; }
html.js:not(.rbr-safe) .rbr-shell--entrada .family:not(.is-in) .family__people svg { opacity: 0; transform: translateY(8px) scale(.6); }
.low-power .rbr-shell--entrada .post-hero__meta li { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(20, 48, 44, .5); }
.low-power .rbr-shell--entrada .validator__light::after { animation: none; display: none; }
@media (prefers-reduced-motion: reduce) {
html.js .rbr-shell--entrada [data-reveal], html.js .rbr-shell--entrada :is(.post-hero__eyebrow, .post-hero__lead, .post-hero__meta, .post-hero__answer) { opacity: 1; transform: none; }
html.js:not(.rbr-safe) .rbr-shell--entrada :is(.post-hero__eyebrow, .post-hero__lead, .post-hero__meta, .post-hero__answer) { animation: none; }
.rbr-shell--entrada .w__i { transform: none; animation: none; }
.rbr-shell--entrada .post-hero__media img { transform: none; }
.rbr-shell--entrada details::details-content { transition: none; }
}
@media (hover: none) {
.rbr-shell--entrada :is(.guide-card:hover .wp-block-image img, .is-style-rbr-lineas li:hover, .is-style-rbr-tarifas li:hover) { transform: none; }
}
/* ==========================================================================
COMPONENTES NUEVOS · añadidos en v1.0.4 (entrada Estambul, D.3)
Estilos de bloque reutilizables — nada suelto en la entrada. Se aplican
desde el selector "Estilos" del editor, igual que rbr-aviso/rbr-pasos/etc.
Todos se pueden editar como bloques nativos normales (Grupo, Lista).
========================================================================== */
@media (min-width: 1px) {
/* is-style-rbr-duo (Grupo): dos tarjetas lado a lado para comparar dos
sitios/opciones (p. ej. "dónde comprarla" en dos aeropuertos). El editor
solo mete 2 Grupos hijos, cada uno con un párrafo corto primero (la
"insignia"), un título y el texto. El color alterna por posición, no por
clase a mano, para que sirva en cualquier entrada futura de dos columnas. */
.is-style-rbr-duo { display: grid; gap: 14px; margin-block: 22px 0; padding: 0; }
@media (min-width: 600px) { .is-style-rbr-duo { grid-template-columns: 1fr 1fr; } }
:is(.is-style-rbr-duo, .is-style-rbr-duo > .wp-block-group__inner-container) > .wp-block-group {
margin: 0; padding: 22px 22px 20px; background: var(--c-paper); border: 1px solid var(--c-line);
border-radius: var(--r-md); box-shadow: var(--shadow-sm);
transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out);
}
:is(.is-style-rbr-duo, .is-style-rbr-duo > .wp-block-group__inner-container) > .wp-block-group:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.is-style-rbr-duo :is(.wp-block-group > p:first-child, .wp-block-group__inner-container > p:first-child) {
display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 28px; margin: 0 0 10px;
padding: 0 10px; border-radius: 999px; background: var(--c-pine-100); color: var(--c-pine-900);
font-family: var(--f-display); font-size: .82rem; font-weight: 700; letter-spacing: .04em;
}
:is(.is-style-rbr-duo, .is-style-rbr-duo > .wp-block-group__inner-container) > .wp-block-group:nth-child(even) :is(.wp-block-group > p:first-child, .wp-block-group__inner-container > p:first-child) {
background: var(--c-sun-50); color: var(--c-sun-ink);
}
.is-style-rbr-duo :is(.wp-block-group, .wp-block-group__inner-container) > :is(h2, h3, h4, .wp-block-heading) {
margin: 0 0 8px; font-family: var(--f-display); font-size: 1.05rem; color: var(--c-pine-900);
}
.is-style-rbr-duo :is(.wp-block-group, .wp-block-group__inner-container) > p:last-child { margin-bottom: 0; }
/* is-style-rbr-compatibilidad (Grupo): dos columnas "sí funciona / no
funciona" para frases completas (no una palabra), a diferencia de
rbr-si-no que es para tickets de una línea. 2 Grupos hijos, cada uno con
un párrafo-cabecera + una Lista normal donde cada es
"Título texto". El icono de cada fila y el color de la
columna dependen de la posición (1º = sí, 2º = no), no de clases a mano. */
.is-style-rbr-compatibilidad { display: grid; gap: 14px; margin-block: 22px 0; padding: 0; }
@media (min-width: 640px) { .is-style-rbr-compatibilidad { grid-template-columns: 1fr 1fr; } }
:is(.is-style-rbr-compatibilidad, .is-style-rbr-compatibilidad > .wp-block-group__inner-container) > .wp-block-group {
margin: 0; padding: 20px 20px 22px; border-radius: var(--r-md); border: 1px solid var(--c-line);
}
:is(.is-style-rbr-compatibilidad, .is-style-rbr-compatibilidad > .wp-block-group__inner-container) > .wp-block-group:nth-child(odd) { background: linear-gradient(170deg, var(--c-pine-100), rgba(223, 234, 230, .3)); }
:is(.is-style-rbr-compatibilidad, .is-style-rbr-compatibilidad > .wp-block-group__inner-container) > .wp-block-group:nth-child(even) { background: var(--c-sun-50); }
.is-style-rbr-compatibilidad :is(.wp-block-group > p:first-child, .wp-block-group__inner-container > p:first-child) {
display: flex; align-items: center; gap: 8px; margin: 0 0 14px;
font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c-pine-900);
}
.is-style-rbr-compatibilidad :is(.wp-block-group > p:first-child, .wp-block-group__inner-container > p:first-child)::before {
content: ""; flex: none; width: 18px; height: 18px; background: var(--c-pine);
-webkit-mask: var(--ico-check-circle) center / contain no-repeat; mask: var(--ico-check-circle) center / contain no-repeat;
}
:is(.is-style-rbr-compatibilidad, .is-style-rbr-compatibilidad > .wp-block-group__inner-container) > .wp-block-group:nth-child(even) :is(.wp-block-group > p:first-child, .wp-block-group__inner-container > p:first-child) { color: var(--c-sun-ink); }
:is(.is-style-rbr-compatibilidad, .is-style-rbr-compatibilidad > .wp-block-group__inner-container) > .wp-block-group:nth-child(even) :is(.wp-block-group > p:first-child, .wp-block-group__inner-container > p:first-child)::before {
background: var(--c-sun-ink); -webkit-mask-image: var(--ico-x-circle); mask-image: var(--ico-x-circle);
}
.is-style-rbr-compatibilidad ul { display: grid; gap: 12px; margin: 0; padding: 0; }
.is-style-rbr-compatibilidad li {
position: relative; margin: 0; padding: 12px 14px 12px 42px;
background: var(--c-paper); border-radius: 14px; box-shadow: var(--shadow-sm);
font-size: .92rem; line-height: 1.5; color: var(--c-ink-2);
}
.is-style-rbr-compatibilidad li::before {
content: ""; position: absolute; left: 14px; top: 14px; width: 20px; height: 20px; background: var(--c-pine);
-webkit-mask: var(--ico-check-circle) center / contain no-repeat; mask: var(--ico-check-circle) center / contain no-repeat;
}
:is(.is-style-rbr-compatibilidad, .is-style-rbr-compatibilidad > .wp-block-group__inner-container) > .wp-block-group:nth-child(even) li::before {
background: var(--c-sun-ink); -webkit-mask-image: var(--ico-x-circle); mask-image: var(--ico-x-circle);
}
.is-style-rbr-compatibilidad li strong { display: block; margin-bottom: 2px; font-family: var(--f-display); font-size: 1rem; color: var(--c-pine-900); }
/* is-style-rbr-reglas (Lista): filas con icono de check, para reglas o
avisos que no son una secuencia (si lo fueran, se usa rbr-pasos). */
.is-style-rbr-reglas { display: grid; gap: 10px; margin-block: 18px 0; padding: 0; }
.is-style-rbr-reglas li {
position: relative; margin: 0; padding: 14px 16px 14px 46px;
background: var(--c-paper); border: 1px solid var(--c-line); border-radius: 14px;
font-weight: 500; color: var(--c-pine-900);
}
.is-style-rbr-reglas li::before {
content: ""; position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
width: 20px; height: 20px; background: var(--c-pine);
-webkit-mask: var(--ico-check-circle) center / contain no-repeat; mask: var(--ico-check-circle) center / contain no-repeat;
}
}
/* ==========================================================================
v1.0.7 · Añadidos para la entrada del aeropuerto de Roma (solo reglas nuevas, retrocompatibles:
no alteran las entradas ya publicadas con el diseño).
========================================================================== */
@media (min-width: 1px) {
/* Colores de la pestaña de compara-dual por aeropuerto: mismos que --ist / --saw
(verde pino = primer aeropuerto, naranja = segundo), con nombre genérico. */
.compara-dual__group--fco .compara-dual__tag { background: linear-gradient(135deg, var(--c-pine) 0%, var(--c-pine-800) 100%); }
.compara-dual__group--cia .compara-dual__tag { background: linear-gradient(135deg, #ffb238 0%, var(--c-sun) 60%, var(--c-sun-600) 100%); color: var(--c-ink); }
/* Exactamente tres tarjetas «Sigue tu ruta» (2/3/4 días): 3 columnas en escritorio para no dejar una huérfana (con 2 o 4 no cambia nada) */
@media (min-width: 900px) { .next-guides:has(.guide-card:nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); } }
/* Tarifas con solo dos tarjetas: 2 columnas (el estilo base reparte en 3) */
@media (min-width: 560px) { .is-style-rbr-tarifas:has(li:nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); } }
/* Tarjeta de guía aún sin publicar (sin foto ni extracto) */
.guide-card--pendiente { justify-content: flex-end; min-height: 180px; padding: 22px; border: 1.5px dashed var(--c-line); border-radius: var(--r-md); background: var(--c-paper); position: relative; }
.guide-card--pendiente .stamp { position: static; margin-bottom: 10px; }
/* Subtítulos H4 (en producción no tienen estilo y se ven como texto normal): un nivel por debajo de H3, con marca naranja */
.prose h4:not(:where(.is-style-rbr-duo *)) {
margin: 2em 0 0; padding-left: 14px; border-left: 3px solid var(--c-sun);
font-family: var(--f-display); font-weight: 500; font-size: clamp(1.12rem, 1.8vw, 1.3rem); line-height: 1.25; letter-spacing: -.005em;
color: var(--c-pine-900); text-wrap: pretty;
}
.prose h3 + h4:not(:where(.is-style-rbr-duo *)) { margin-top: 1.4em; }
:is(.prose, .prose > .wp-block-group__inner-container) > h4:not(:where(.is-style-rbr-duo *)) + * { margin-top: 12px; }
}
/* ==========================================================================
v1.0.12 · Añadidos para la entrada del aeropuerto de París (PROPUESTAS LOCALES de la maqueta)
Todo retrocompatible: usa clases nuevas (.compara-tabs, .zonas, .bonos/.bono) o selectores :has()
«exactos» (tarifas de 4 tarjetas), que no existen en las entradas ya publicadas
(BCN: tarifas de 3 · Roma: tarifas de 2 · compara-dual de 2 grupos en Estambul y Roma).
El CSS base cuelga de .rbr-shell--entrada (anidado): por eso todos los selectores llevan ese prefijo.
========================================================================== */
@media (min-width: 1px) {
/* 1. COMPARATIVA CON PESTAÑAS DESLIZANTES (Grupo «Selector de perfiles» + clase compara-tabs)
Reutiliza el JS del selector de perfiles (crea las pestañas y alterna los paneles); aquí solo cambia el
aspecto: barra de pestañas tipo «segmentado» con una píldora de color que se desliza de una a otra, y cada
panel es una tabla de tarjetas de embarque. Sin JS se ven los tres paneles apilados, cada uno con su título. */
.rbr-shell--entrada .compara-tabs.situ.is-ready { display: block; overflow: visible; background: none; border-radius: 0; box-shadow: none; }
.rbr-shell--entrada .compara-tabs .situ__tabs {
--tab-bg: linear-gradient(135deg, var(--c-pine) 0%, var(--c-pine-900) 100%); --tab-ink: var(--c-cream);
position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding: 6px;
background: var(--c-sand); border: 1px solid var(--c-line); border-radius: 22px;
}
.rbr-shell--entrada .compara-tabs .situ__tabs .situ__tab {
flex-direction: column; justify-content: center; align-items: center; gap: 1px; min-height: 84px; padding: 10px 6px;
border-radius: 17px; background: transparent; color: var(--c-pine-900); text-align: center; font-size: 1.2rem; line-height: 1.1;
}
.rbr-shell--entrada .compara-tabs .situ__tabs .situ__tab:hover { background: rgba(255, 254, 247, .6); }
.rbr-shell--entrada .compara-tabs .situ__tabs .situ__tab .situ__emoji {
width: auto; height: auto; margin-bottom: 3px; border-radius: 0; background: none; font-size: 1.4rem; line-height: 1;
transition: transform var(--t-med) var(--ease-out);
}
.rbr-shell--entrada .compara-tabs .situ__tabs .situ__tab[aria-selected="true"] { background: transparent; box-shadow: none; color: var(--tab-ink); }
.rbr-shell--entrada .compara-tabs .situ__tabs .situ__tab[aria-selected="true"] .situ__emoji { background: none; transform: translateY(-2px) scale(1.15); }
.rbr-shell--entrada .compara-tabs .situ__tab strong { font-family: var(--f-display); font-size: 1.3rem; font-weight: 600; color: inherit; }
.rbr-shell--entrada .compara-tabs .situ__tab small {
display: block; font-family: var(--f-body); font-size: .6rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .75;
}
/* Píldora que se desliza (un color por aeropuerto: verde pino · naranja · turquesa) */
@supports selector(:has(*)) {
.rbr-shell--entrada .compara-tabs .situ__tabs::before {
content: ""; position: absolute; z-index: -1; top: 6px; bottom: 6px; left: 6px; width: calc((100% - 12px) / 3);
border-radius: 17px; background: var(--tab-bg); box-shadow: var(--shadow-md);
transition: transform .55s var(--ease-out), background .4s;
}
.rbr-shell--entrada .compara-tabs .situ__tabs:has(.situ__tab:nth-child(2)[aria-selected="true"]) {
--tab-bg: linear-gradient(135deg, #ffb238 0%, var(--c-sun) 60%, var(--c-sun-600) 100%); --tab-ink: var(--c-ink);
}
.rbr-shell--entrada .compara-tabs .situ__tabs:has(.situ__tab:nth-child(3)[aria-selected="true"]) {
--tab-bg: linear-gradient(135deg, #2a8ba5 0%, #1d6679 100%); --tab-ink: var(--c-cream);
}
.rbr-shell--entrada .compara-tabs .situ__tabs:has(.situ__tab:nth-child(2)[aria-selected="true"])::before { transform: translateX(100%); }
.rbr-shell--entrada .compara-tabs .situ__tabs:has(.situ__tab:nth-child(3)[aria-selected="true"])::before { transform: translateX(200%); }
}
@supports not selector(:has(*)) {
.rbr-shell--entrada .compara-tabs .situ__tabs .situ__tab:nth-child(1)[aria-selected="true"] { background: var(--c-pine-900); }
.rbr-shell--entrada .compara-tabs .situ__tabs .situ__tab:nth-child(2)[aria-selected="true"] { background: var(--c-sun); --tab-ink: var(--c-ink); color: var(--c-ink); }
.rbr-shell--entrada .compara-tabs .situ__tabs .situ__tab:nth-child(3)[aria-selected="true"] { background: #1d6679; }
}
@media (prefers-reduced-motion: reduce) { .rbr-shell--entrada .compara-tabs .situ__tabs::before { transition: none; } }
.rbr-shell--entrada .compara-tabs .situ__stage { display: block; overflow: visible; min-height: 0; padding: 18px 0 0; background: none; color: inherit; }
.rbr-shell--entrada .compara-tabs.situ.is-ready .situ__panel { display: block; container-type: inline-size; }
.rbr-shell--entrada .compara-tabs.situ.is-ready .situ__panel[hidden] { display: none; }
.rbr-shell--entrada .compara-tabs.is-ready .situ__who { display: none; }
.rbr-shell--entrada .compara-tabs:not(.is-ready) .situ__who strong { font-weight: 600; }
.rbr-shell--entrada .compara-tabs:not(.is-ready) .situ__who small { font-size: .8em; opacity: .75; }
.rbr-shell--entrada .compara-tabs.situ.is-ready .situ__pick {
display: block; max-width: none; margin: 0 0 14px !important; padding: 0 6px;
font-family: var(--f-body); font-size: .95rem; font-weight: 500; letter-spacing: 0; line-height: 1.4; color: var(--c-muted); text-wrap: pretty;
}
.rbr-shell--entrada .compara-tabs.situ.is-ready .situ__pick::before {
content: ""; display: inline-block; width: 20px; height: 20px; margin-right: 10px; vertical-align: -4px; background: var(--c-sun);
-webkit-mask: var(--ico-check-circle) center / contain no-repeat; mask: var(--ico-check-circle) center / contain no-repeat;
}
.rbr-shell--entrada .compara-tabs.situ.is-ready .situ__pick strong { font-family: var(--f-display); font-size: 1.15rem; font-weight: 500; color: var(--c-pine-900); }
.rbr-shell--entrada .compara-tabs .situ__panel .wp-block-table.is-style-rbr-compara { margin: 0; }
.rbr-shell--entrada .compara-tabs .situ__panel.is-entering :is(.situ__pick, .wp-block-table) { animation: situ-in .55s var(--ease-out) both; }
.rbr-shell--entrada .compara-tabs .situ__panel.is-entering .wp-block-table { animation-delay: .07s; }
@media (max-width: 420px) {
.rbr-shell--entrada .compara-tabs .situ__tabs .situ__tab { min-height: 88px; padding-inline: 2px; }
.rbr-shell--entrada .compara-tabs .situ__tab small { letter-spacing: .06em; font-size: .56rem; }
}
/* 2. TARIFAS CON EXACTAMENTE CUATRO TARJETAS: 2 columnas (la base reparte en 3 y dejaría una huérfana) */
@media (min-width: 560px) { .is-style-rbr-tarifas:has(li:nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); } }
/* 3. REGLA DE ZONAS (lista ordenada con la clase «zonas»): apoyo visual a «zonas concéntricas, del 1 al 5» */
.rbr-shell--entrada .zonas {
position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 22px 0 0; padding: 18px 14px 14px;
list-style: none; background: var(--c-sand); border: 1px solid var(--c-line); border-radius: 22px;
}
.rbr-shell--entrada .zonas::before {
content: ""; position: absolute; top: 40px; left: calc(14px + (100% - 28px) / 10); right: calc(14px + (100% - 28px) / 10); height: 4px; border-radius: 4px;
background: linear-gradient(90deg, var(--c-pine) 0%, var(--c-sun) 100%);
}
.rbr-shell--entrada .zonas li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 0; padding: 0; text-align: center; }
.rbr-shell--entrada .zonas li::marker { content: none; }
.rbr-shell--entrada .zonas strong {
display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--c-paper); border: 3px solid var(--c-pine);
font-family: var(--f-display); font-size: 1.25rem; font-weight: 600; color: var(--c-pine-900); box-shadow: var(--shadow-sm);
}
.rbr-shell--entrada .zonas li:nth-child(2) strong { border-color: #6b7a45; }
.rbr-shell--entrada .zonas li:nth-child(3) strong { border-color: #9a8a30; }
.rbr-shell--entrada .zonas li:nth-child(4) strong { border-color: #c79a1c; }
.rbr-shell--entrada .zonas li:first-child strong { background: var(--c-pine); border-color: var(--c-pine); color: var(--c-cream); }
.rbr-shell--entrada .zonas li:last-child strong { background: var(--c-sun); border-color: var(--c-sun-600); color: var(--c-ink); }
.rbr-shell--entrada .zonas small { min-height: 1.2em; font-size: .62rem; font-weight: 700; letter-spacing: .12em; line-height: 1.2; text-transform: uppercase; color: var(--c-muted); }
.rbr-shell--entrada .zonas li:last-child small { color: var(--c-sun-ink); }
/* 4. TARJETAS «BONO» (Grupo con la clase «bonos» que contiene Grupos «bono»): tres opciones de billete a la vez en
escritorio y carrusel deslizable (scroll-snap) en móvil. Cabecera de color con nombre y precio, cuerpo con
los datos (lista con checks) y aviso «Ojo» al pie. */
.rbr-shell--entrada .bonos {
display: grid; grid-auto-flow: column; grid-auto-columns: min(86%, 340px); gap: 14px; margin: 22px -2px 0; padding: 6px 2px 18px;
overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin;
}
@container (min-width: 760px) {
.rbr-shell--entrada .bonos { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 24px 0 0; padding: 0; overflow: visible; scroll-snap-type: none; }
}
.rbr-shell--entrada .bono {
--bono-bg: linear-gradient(135deg, var(--c-pine) 0%, var(--c-pine-900) 100%); --bono-ink: var(--c-cream);
position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; scroll-snap-align: start;
background: var(--c-paper); border: 1px solid var(--c-line); border-radius: 24px; box-shadow: var(--shadow-sm);
transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med);
}
.rbr-shell--entrada .bono--visite { --bono-bg: linear-gradient(135deg, #ffb238 0%, var(--c-sun) 55%, var(--c-sun-600) 100%); --bono-ink: var(--c-ink); }
.rbr-shell--entrada .bono--sencillo { --bono-bg: linear-gradient(135deg, var(--c-pine-100) 0%, #c7dcd5 100%); --bono-ink: var(--c-pine-900); }
@media (hover: hover) { .rbr-shell--entrada .bono:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } }
.rbr-shell--entrada .bono__face { position: relative; isolation: isolate; overflow: hidden; padding: 22px 22px 24px; color: var(--bono-ink); background: var(--bono-bg); }
.rbr-shell--entrada .bono__face::before {
content: ""; position: absolute; inset: 0; z-index: -1;
background: radial-gradient(circle at 108% 125%, rgba(255, 255, 255, .17) 0 34%, transparent 34.5%), radial-gradient(circle at 108% 125%, rgba(255, 255, 255, .09) 0 54%, transparent 54.5%);
}
.rbr-shell--entrada .bono__face h4.wp-block-heading {
margin: 0; padding: 0; border: 0; font-family: var(--f-display); font-size: 1.3rem; font-weight: 500; line-height: 1.15; letter-spacing: -.005em; color: inherit; text-wrap: balance;
}
.rbr-shell--entrada .bono__face .bono__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; margin: 16px 0 0; line-height: 1; color: inherit; }
.rbr-shell--entrada .bono__face .bono__price strong { font-family: var(--f-display); font-size: 2.6rem; font-weight: 500; letter-spacing: -.02em; color: inherit; }
.rbr-shell--entrada .bono__face .bono__price small { font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .8; }
/* cuerpo: línea de puntos de billete con las dos muescas laterales */
.rbr-shell--entrada .bono__body { position: relative; display: flex; flex: 1; flex-direction: column; gap: 14px; padding: 22px 22px 22px; border-top: 2px dashed var(--c-sand-2); }
.rbr-shell--entrada .bono__body::before, .rbr-shell--entrada .bono__body::after {
content: ""; position: absolute; top: -12px; width: 22px; height: 22px; border-radius: 50%; background: var(--c-cream);
}
.rbr-shell--entrada .bono__body::before { left: -11px; }
.rbr-shell--entrada .bono__body::after { right: -11px; }
.rbr-shell--entrada .bono__body p { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--c-ink-2); }
.rbr-shell--entrada .bono__body ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.rbr-shell--entrada .bono__body li { position: relative; margin: 0; padding: 0 0 0 28px; font-size: .92rem; line-height: 1.5; color: var(--c-ink-2); }
.rbr-shell--entrada .bono__body li::before {
content: ""; position: absolute; left: 0; top: .18em; width: 19px; height: 19px; background: var(--c-pine);
-webkit-mask: var(--ico-check-circle) center / contain no-repeat; mask: var(--ico-check-circle) center / contain no-repeat;
}
.rbr-shell--entrada .bono--visite .bono__body li::before { background: var(--c-sun-ink); }
.rbr-shell--entrada .bono__body .bono__ojo {
margin-top: auto; padding: 11px 14px; border-left: 3px solid var(--c-sun); border-radius: 4px 12px 12px 4px; background: var(--c-sun-50); font-size: .88rem; line-height: 1.5;
}
}
/* ==========================================================================
v1.0.13 (PROPUESTA) · Componentes nuevos para los ITINERARIOS (entrada «Estambul en 3 días», PROPUESTAS LOCALES de la maqueta)
Se AÑADE al final del CSS de 1.0.12 (los primeros 106580 bytes son idénticos a los del servidor). Todo retrocompatible:
clases nuevas (.is-style-rbr-horario, .pases/.pase, .rbr-dia, .parada, .compara-tabs--2/--6, .mapa-embed, .rbr-tips/.consejo-foto,
.reservas/.reserva, .lugar, .lineas-metro, .veredicto, .fotos-2) que no existen en las entradas ya publicadas. El CSS base cuelga de
.rbr-shell--entrada (anidado): por eso todos los selectores llevan ese prefijo. Las consultas @container miran al contenedor .prose.
Criterio de diseño: las FOTOS DEL CONTENIDO NUNCA SE RECORTAN (proporción real); solo las cabeceras de tarjeta de proporción fija
(pases 3:2, fotos 16:9 de reservas) usan «cover», y con fotos que ya tienen esa proporción. Las tarjetas con foto NO abren el zoom.
Cada Grupo de Gutenberg lleva un .wp-block-group__inner-container: los selectores «>» lo cuentan o lo ponen en display:contents.
========================================================================== */
@media (min-width: 1px) {
/* 1. REPARTO POR DÍAS · tabla nativa con clase is-style-rbr-horario: cada fila es una tarjeta flotante; la celda del día lleva el degradado
de color de su día (como la cabecera «rbr-dia»); al pasar el ratón la fila se eleva y el degradado se desliza. Móvil: filas apiladas. */
.rbr-shell--entrada .wp-block-table:is(.is-style-rbr-horario, .is-style-rbr-estaciones) { margin: 22px 0 0; overflow: visible; }
.rbr-shell--entrada :is(.is-style-rbr-horario, .is-style-rbr-estaciones) table { width: 100%; border-collapse: separate; border-spacing: 0 12px; margin-top: -12px; table-layout: fixed; border: 0; font-size: .95rem; line-height: 1.55; }
.rbr-shell--entrada :is(.is-style-rbr-horario, .is-style-rbr-estaciones) thead { border: 0; }
.rbr-shell--entrada :is(.is-style-rbr-horario, .is-style-rbr-estaciones) th {
padding: 0 22px 4px; border: 0; background: none; color: var(--c-muted); text-align: left;
font-family: var(--f-body); font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
}
.rbr-shell--entrada :is(.is-style-rbr-horario, .is-style-rbr-estaciones) th:first-child { width: 34%; }
.rbr-shell--entrada :is(.is-style-rbr-horario, .is-style-rbr-estaciones) td {
padding: 20px 22px; vertical-align: middle; color: var(--c-ink-2); background: var(--c-paper); border: 0; border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line);
transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med), background-color var(--t-med), background-position .8s var(--ease-out);
}
.rbr-shell--entrada :is(.is-style-rbr-horario, .is-style-rbr-estaciones) td:last-child { border-right: 1px solid var(--c-line); border-radius: 0 22px 22px 0; }
.rbr-shell--entrada :is(.is-style-rbr-horario, .is-style-rbr-estaciones) td:first-child {
--dia-bg: linear-gradient(135deg, var(--c-pine) 0%, var(--c-pine-900) 55%, var(--c-pine) 100%);
border: 0; border-radius: 22px 0 0 22px; background: var(--dia-bg); background-size: 220% 100%; background-position: 0 0; color: var(--c-cream);
font-family: var(--f-display); font-size: 1.15rem; font-weight: 500; line-height: 1.25;
}
.rbr-shell--entrada :is(.is-style-rbr-horario, .is-style-rbr-estaciones) tbody tr:nth-child(2) td:first-child { --dia-bg: linear-gradient(135deg, #ffb238 0%, var(--c-sun) 45%, #ffb238 100%); color: var(--c-ink); }
.rbr-shell--entrada :is(.is-style-rbr-horario, .is-style-rbr-estaciones) tbody tr:nth-child(3) td:first-child { --dia-bg: linear-gradient(135deg, #2a8ba5 0%, #1d6679 55%, #2a8ba5 100%); }
.rbr-shell--entrada :is(.is-style-rbr-horario, .is-style-rbr-estaciones) td:first-child strong {
display: block; width: fit-content; margin: 0 0 8px; padding: 4px 12px; border-radius: 999px; background: rgba(255, 255, 255, .18); color: inherit;
font-family: var(--f-body); font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; transition: transform var(--t-med) var(--ease-out), background var(--t-med);
}
.rbr-shell--entrada :is(.is-style-rbr-horario, .is-style-rbr-estaciones) tbody tr:nth-child(2) td:first-child strong { background: rgba(14, 34, 31, .12); }
@media (hover: hover) {
.rbr-shell--entrada :is(.is-style-rbr-horario, .is-style-rbr-estaciones) tbody tr:hover td { transform: translateY(-4px); box-shadow: 0 18px 30px -20px rgba(14, 34, 31, .55); background-color: var(--c-sun-50); border-color: transparent; }
.rbr-shell--entrada :is(.is-style-rbr-horario, .is-style-rbr-estaciones) tbody tr:hover td:first-child { background-position: 100% 0; background-color: transparent; }
.rbr-shell--entrada :is(.is-style-rbr-horario, .is-style-rbr-estaciones) tbody tr:hover td:first-child strong { transform: scale(1.08) rotate(-2deg); background: rgba(255, 255, 255, .3); }
.rbr-shell--entrada :is(.is-style-rbr-horario, .is-style-rbr-estaciones) tbody tr:nth-child(2):hover td:first-child strong { background: rgba(14, 34, 31, .2); }
}
@container (max-width: 639px) {
.rbr-shell--entrada :is(.is-style-rbr-horario, .is-style-rbr-estaciones) table { margin-top: 0; border-spacing: 0; }
.rbr-shell--entrada :is(.is-style-rbr-horario, .is-style-rbr-estaciones) :is(table, tbody, tr, td) { display: block; width: auto; }
.rbr-shell--entrada :is(.is-style-rbr-horario, .is-style-rbr-estaciones) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.rbr-shell--entrada :is(.is-style-rbr-horario, .is-style-rbr-estaciones) tr { margin: 0 0 14px; overflow: hidden; background: var(--c-paper); border: 1px solid var(--c-line); border-radius: 22px; box-shadow: var(--shadow-sm); }
.rbr-shell--entrada :is(.is-style-rbr-horario, .is-style-rbr-estaciones) td { padding: 14px 20px; border: 0; border-radius: 0; }
.rbr-shell--entrada :is(.is-style-rbr-horario, .is-style-rbr-estaciones) td:first-child { padding: 18px 20px; border-radius: 0; }
.rbr-shell--entrada :is(.is-style-rbr-horario, .is-style-rbr-estaciones) td:last-child { border: 0; border-radius: 0; }
.rbr-shell--entrada :is(.is-style-rbr-horario, .is-style-rbr-estaciones) td:nth-child(n+2)::before { display: block; margin-bottom: 3px; font-size: .66rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--c-sun-ink); }
.rbr-shell--entrada :is(.is-style-rbr-horario, .is-style-rbr-estaciones) td:nth-child(2)::before { content: "Mañana"; }
.rbr-shell--entrada :is(.is-style-rbr-horario, .is-style-rbr-estaciones) td:nth-child(3)::before { content: "Tarde"; }
}
/* 1b. «72 HORAS»: tabla de verdad (borde único redondeado, cabecera oscura, filas pegadas con líneas); en móvil se mantienen las filas apiladas */
@container (min-width: 640px) {
.rbr-shell--entrada .wp-block-table.is-style-rbr-horario { overflow: hidden; background: var(--c-paper); border: 1px solid var(--c-line); border-radius: 20px; box-shadow: var(--shadow-sm); }
.rbr-shell--entrada .is-style-rbr-horario table { margin: 0; border-collapse: collapse; border-spacing: 0; }
.rbr-shell--entrada .is-style-rbr-horario th { padding: 14px 22px; background: var(--c-pine-900); color: var(--c-cream); }
.rbr-shell--entrada .is-style-rbr-horario td { border: 0; border-top: 1px solid var(--c-line); border-radius: 0; background-color: transparent; }
.rbr-shell--entrada .is-style-rbr-horario :is(td:first-child, td:last-child) { border-radius: 0; }
.rbr-shell--entrada .is-style-rbr-horario td:last-child { border-right: 0; }
.rbr-shell--entrada .is-style-rbr-horario td:first-child { border-top-color: rgba(255, 255, 255, .22); }
.rbr-shell--entrada .is-style-rbr-horario tbody tr:hover td { transform: none; box-shadow: none; }
.rbr-shell--entrada .is-style-rbr-horario tbody tr:hover td:not(:first-child) { background-color: var(--c-sun-50); }
.rbr-shell--entrada .is-style-rbr-horario tbody tr:hover td:first-child { background-color: transparent; background-position: 100% 0; }
.rbr-shell--entrada .is-style-rbr-horario tbody tr:hover td:last-child { box-shadow: inset -4px 0 0 var(--c-sun); }
}
/* 2. CABECERA DE DÍA (Grupo «rbr-dia» = sello con el número + H3 con su ancla). Al pasar el ratón: se eleva, un destello la cruza y el sello gira. */
.rbr-shell--entrada .rbr-dia {
--dia-bg: linear-gradient(135deg, var(--c-pine) 0%, var(--c-pine-900) 100%); --dia-ink: var(--c-cream);
position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; gap: 18px;
margin: clamp(44px, 6vw, 72px) 0 0; padding: 20px 24px; border-radius: 24px; background: var(--dia-bg); color: var(--dia-ink); box-shadow: var(--shadow-md);
transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med);
}
.rbr-shell--entrada .rbr-dia::before {
content: ""; position: absolute; inset: 0; z-index: -1;
background: radial-gradient(circle at 104% 130%, rgba(255, 255, 255, .17) 0 30%, transparent 30.5%), radial-gradient(circle at 104% 130%, rgba(255, 255, 255, .09) 0 48%, transparent 48.5%);
}
.rbr-shell--entrada .rbr-dia::after {
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .3) 50%, transparent 65%); transform: translateX(-120%); transition: transform 1s var(--ease-out);
}
.rbr-shell--entrada .rbr-dia > .wp-block-group__inner-container { display: contents; }
.rbr-shell--entrada .rbr-dia--2 { --dia-bg: linear-gradient(135deg, #ffb238 0%, var(--c-sun) 55%, var(--c-sun-600) 100%); --dia-ink: var(--c-ink); }
.rbr-shell--entrada .rbr-dia--3 { --dia-bg: linear-gradient(135deg, #2a8ba5 0%, #1d6679 100%); --dia-ink: var(--c-cream); }
.rbr-shell--entrada .rbr-dia__n {
flex: none; display: grid; place-content: center; justify-items: center; width: 70px; height: 70px; margin: 0; border-radius: 20px;
background: rgba(255, 255, 255, .16); font-family: var(--f-display); line-height: 1; color: inherit; transition: transform var(--t-med) var(--ease-out), background var(--t-med);
}
.rbr-shell--entrada .rbr-dia--2 .rbr-dia__n { background: rgba(14, 34, 31, .12); }
.rbr-shell--entrada .rbr-dia__n small { font-family: var(--f-body); font-size: .58rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; opacity: .85; }
.rbr-shell--entrada .rbr-dia__n strong { font-size: 2.2rem; font-weight: 500; color: inherit; }
.rbr-shell--entrada .rbr-dia h3.wp-block-heading { margin: 0; color: inherit; font-size: clamp(1.15rem, 2.3vw, 1.6rem); line-height: 1.2; text-wrap: balance; transition: transform var(--t-med) var(--ease-out); }
.rbr-shell--entrada .rbr-dia + p { margin-top: 24px; }
@media (hover: hover) {
.rbr-shell--entrada .rbr-dia:hover { transform: translateY(-4px); box-shadow: 0 26px 44px -22px rgba(14, 34, 31, .6); }
.rbr-shell--entrada .rbr-dia:hover::after { transform: translateX(120%); }
.rbr-shell--entrada .rbr-dia:hover .rbr-dia__n { transform: rotate(-7deg) scale(1.1); background: rgba(255, 255, 255, .26); }
.rbr-shell--entrada .rbr-dia--2:hover .rbr-dia__n { background: rgba(14, 34, 31, .2); }
.rbr-shell--entrada .rbr-dia:hover h3.wp-block-heading { transform: translateX(6px); }
}
/* 3. PARADA (Grupo «parada»): H4 + texto y, DEBAJO, la foto a todo el ancho y SIN recorte (como «Mercado de Kadıköy») + extras (avisos y botones).
Sin tarjeta de fondo. Las paradas numeradas en el mapa ilustrado llevan su círculo (parada--d1/2/3 + parada--n1…8). */
.rbr-shell--entrada .parada { margin: 48px 0 0; }
.rbr-shell--entrada .parada > .wp-block-group__inner-container > * + * { margin-top: 18px; }
.rbr-shell--entrada .parada > .wp-block-group__inner-container > h4.wp-block-heading { margin: 0; }
.rbr-shell--entrada .parada__fila > .wp-block-group__inner-container { display: grid; gap: 22px; }
.rbr-shell--entrada .parada__texto > .wp-block-group__inner-container > * { margin-block: 0; }
.rbr-shell--entrada .parada__texto > .wp-block-group__inner-container > * + * { margin-top: 14px; }
.rbr-shell--entrada .prose .parada .wp-block-image { margin: 0; }
.rbr-shell--entrada .parada .wp-block-image img { width: 100%; height: auto; aspect-ratio: auto; }
.rbr-shell--entrada .prose .parada .fig--cuadrada { width: min(100%, 520px); margin-inline: auto; }
.rbr-shell--entrada .parada > .wp-block-group__inner-container > :is(.is-style-rbr-aviso, .is-style-rbr-consejo) { margin-top: 22px; }
.rbr-shell--entrada .parada > .wp-block-group__inner-container > .wp-block-buttons { margin-block: 22px 0; }
/* círculo numerado (los mismos números que los pines del mapa ilustrado: Día 1 naranja · Día 2 pino · Día 3 turquesa) */
.rbr-shell--entrada .parada--d1 { --pin-bg: linear-gradient(135deg, #ffb238, var(--c-sun)); --pin-ink: var(--c-ink); }
.rbr-shell--entrada .parada--d2 { --pin-bg: linear-gradient(135deg, var(--c-pine), var(--c-pine-900)); --pin-ink: var(--c-cream); }
.rbr-shell--entrada .parada--d3 { --pin-bg: linear-gradient(135deg, #2a8ba5, #1d6679); --pin-ink: var(--c-cream); }
.rbr-shell--entrada .parada--n1 { --pin: "1"; } .rbr-shell--entrada .parada--n2 { --pin: "2"; } .rbr-shell--entrada .parada--n3 { --pin: "3"; } .rbr-shell--entrada .parada--n4 { --pin: "4"; }
.rbr-shell--entrada .parada--n5 { --pin: "5"; } .rbr-shell--entrada .parada--n6 { --pin: "6"; } .rbr-shell--entrada .parada--n7 { --pin: "7"; } .rbr-shell--entrada .parada--n8 { --pin: "8"; }
.rbr-shell--entrada .parada[class*="parada--n"] > .wp-block-group__inner-container > h4.wp-block-heading { display: flex; align-items: center; gap: 14px; padding-left: 0; border-left: 0; }
.rbr-shell--entrada .parada[class*="parada--n"] > .wp-block-group__inner-container > h4.wp-block-heading::before {
content: var(--pin); flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--pin-bg); color: var(--pin-ink);
font-family: var(--f-body); font-size: 1rem; font-weight: 700; box-shadow: 0 0 0 4px var(--c-cream), 0 6px 14px -6px rgba(14, 34, 31, .5); transition: transform var(--t-med) var(--ease-out);
}
@media (hover: hover) { .rbr-shell--entrada .parada:hover > .wp-block-group__inner-container > h4.wp-block-heading::before { transform: scale(1.12) rotate(-6deg); } }
/* 4. PESTAÑAS DESLIZANTES de 2 y de 6 paneles (sobre .compara-tabs; el JS es el del selector de perfiles) ------------------- */
@supports selector(:has(*)) {
.rbr-shell--entrada .compara-tabs--2 .situ__tabs::before { width: calc((100% - 12px) / 2); }
}
.rbr-shell--entrada .compara-tabs--2 .situ__tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* 6 pestañas: sin píldora deslizante (el ancho útil cambia en móvil, donde la barra se desplaza); la pestaña activa se rellena */
.rbr-shell--entrada .compara-tabs--6 .situ__tabs { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.rbr-shell--entrada .compara-tabs--6 .situ__tabs::before { display: none; }
.rbr-shell--entrada .compara-tabs--6 .situ__tabs .situ__tab[aria-selected="true"] { background: var(--c-pine-900); color: var(--c-cream); --tab-ink: var(--c-cream); box-shadow: var(--shadow-sm); }
@container (max-width: 639px) {
.rbr-shell--entrada .compara-tabs--6 .situ__tabs {
grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 98px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: thin;
}
.rbr-shell--entrada .compara-tabs--6 .situ__tabs .situ__tab { scroll-snap-align: start; }
}
/* Paneles con más bloques que «etiqueta · elección · tabla»: la 3.ª línea (clase situ__why del JS) pasa a texto normal.
SOLO en --2 y --6: las comparativas de aeropuertos (compara-tabs--triple, etc.) no deben cambiar (detectado en la prueba A/B con París) */
.rbr-shell--entrada .compara-tabs:is(.compara-tabs--2, .compara-tabs--6).situ.is-ready .situ__panel > * + *, .rbr-shell--entrada .compara-tabs:is(.compara-tabs--2, .compara-tabs--6).situ.is-ready .situ__panel > .wp-block-group__inner-container > * + * { margin-top: 14px; }
.rbr-shell--entrada .compara-tabs:is(.compara-tabs--2, .compara-tabs--6).situ.is-ready .situ__panel .situ__why { max-width: none; margin-top: 14px !important; padding: 0 6px; font-size: 1rem; line-height: 1.7; color: var(--c-ink-2); }
.rbr-shell--entrada .compara-tabs:is(.compara-tabs--2, .compara-tabs--6).situ.is-ready .situ__panel > p:not(.situ__who, .situ__pick), .rbr-shell--entrada .compara-tabs:is(.compara-tabs--2, .compara-tabs--6).situ.is-ready .situ__panel > .wp-block-group__inner-container > p:not(.situ__who, .situ__pick) { padding-inline: 6px; }
.rbr-shell--entrada .compara-tabs:is(.compara-tabs--2, .compara-tabs--6) .situ__panel :is(.is-style-rbr-lineas, .is-style-rbr-aviso, .is-style-rbr-consejo, .wp-block-image, .wp-block-buttons):not(:first-child) { margin-top: 22px; }
.rbr-shell--entrada .compara-tabs:is(.compara-tabs--2, .compara-tabs--6) .situ__panel h5.wp-block-heading + p.situ__why { margin-top: 10px !important; }
.rbr-shell--entrada .compara-tabs:is(.compara-tabs--2, .compara-tabs--6) .situ__panel h5.wp-block-heading {
display: flex; align-items: center; gap: 10px; margin: 28px 0 0; padding: 0 6px; font-family: var(--f-display); font-weight: 450; font-size: 1.28rem; line-height: 1.25; color: var(--c-pine-900);
}
.rbr-shell--entrada .compara-tabs:is(.compara-tabs--2, .compara-tabs--6) .situ__panel h5.wp-block-heading::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--c-sun); box-shadow: 0 0 0 4px var(--c-sun-50); }
.rbr-shell--entrada .compara-tabs:is(.compara-tabs--2, .compara-tabs--6) .situ__panel h5.wp-block-heading:first-of-type { margin-top: 6px; }
/* 4b. LÍNEAS DE METRO con los colores ORIGINALES de cada línea (M1…M9, M11) */
.rbr-shell--entrada .is-style-rbr-lineas.lineas-metro { gap: 10px; }
.rbr-shell--entrada .is-style-rbr-lineas.lineas-metro li { min-height: 0; padding: 14px 18px 8px 14px; }
.rbr-shell--entrada .is-style-rbr-lineas.lineas-metro li code { color: #fff; }
.rbr-shell--entrada .is-style-rbr-lineas.lineas-metro li:nth-child(1) code { background: #ef1c24; }
.rbr-shell--entrada .is-style-rbr-lineas.lineas-metro li:nth-child(2) code { background: #009943; }
.rbr-shell--entrada .is-style-rbr-lineas.lineas-metro li:nth-child(3) code { background: #00a9e2; }
.rbr-shell--entrada .is-style-rbr-lineas.lineas-metro li:nth-child(4) code { background: #e91977; }
.rbr-shell--entrada .is-style-rbr-lineas.lineas-metro li:nth-child(5) code { background: #672c65; }
.rbr-shell--entrada .is-style-rbr-lineas.lineas-metro li:nth-child(6) code { background: #c9ab78; color: var(--c-ink); }
.rbr-shell--entrada .is-style-rbr-lineas.lineas-metro li:nth-child(7) code { background: #f29fc0; color: var(--c-ink); }
.rbr-shell--entrada .is-style-rbr-lineas.lineas-metro li:nth-child(8) code { background: #427bbf; }
.rbr-shell--entrada .is-style-rbr-lineas.lineas-metro li:nth-child(9) code { background: #ffd400; color: var(--c-ink); }
.rbr-shell--entrada .is-style-rbr-lineas.lineas-metro li:nth-child(10) code { background: #ac5390; }
/* 5. MAPAS EMBEBIDOS (Google My Maps en un iframe dentro de un bloque HTML) ------------------------------------------------- */
.rbr-shell--entrada .mapa-embed {
position: relative; margin: 20px 0 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--c-sand); border: 1px solid var(--c-line); border-radius: var(--r-md); box-shadow: var(--shadow-md);
}
.rbr-shell--entrada .mapa-embed > .wp-block-group__inner-container { display: contents; }
.rbr-shell--entrada .mapa-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; border: 0; }
@container (min-width: 640px) { .rbr-shell--entrada .mapa-embed { aspect-ratio: 16 / 10; } }
/* Las fotos de las tarjetas NO se amplían (no aporta nada): sin botón de zoom ni cursor de lupa */
.rbr-shell--entrada :is(.pase, .consejo-foto, .reserva, .lugar) .media__zoom { display: none; }
/* 6. PASES (Grupo «pases» con Grupos «pase»): foto 3:2 arriba + etiqueta, nombre, precio, texto, listas ✓/✗ y «Ideal para».
Carrusel en móvil, 2 columnas desde 640 px de contenedor. ------------------------------------------------------------------- */
.rbr-shell--entrada .pases {
display: grid; grid-auto-flow: column; grid-auto-columns: min(86%, 340px); gap: 14px; margin: 24px -2px 0; padding: 6px 2px 18px;
overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin;
}
.rbr-shell--entrada .pases > .wp-block-group__inner-container { display: contents; }
@container (min-width: 640px) {
.rbr-shell--entrada .pases { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 26px 0 0; padding: 0; overflow: visible; scroll-snap-type: none; }
}
.rbr-shell--entrada .pase {
display: flex; flex-direction: column; min-width: 0; overflow: hidden; scroll-snap-align: start; background: var(--c-paper); border: 1px solid var(--c-line); border-radius: 24px; box-shadow: var(--shadow-sm);
transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med);
}
.rbr-shell--entrada .pase > .wp-block-group__inner-container { display: flex; flex: 1; flex-direction: column; min-width: 0; }
@media (hover: hover) { .rbr-shell--entrada .pase:hover { transform: translateY(-5px); box-shadow: 0 24px 40px -22px rgba(14, 34, 31, .5); } }
.rbr-shell--entrada .pase .wp-block-image { margin: 0; }
.rbr-shell--entrada .pase .wp-block-image .media__frame { border-radius: 0; box-shadow: none; }
.rbr-shell--entrada .pase .wp-block-image img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 0; box-shadow: none; }
.rbr-shell--entrada .pase--combo .wp-block-image img { object-position: 50% 80%; }
.rbr-shell--entrada .pase__body { display: flex; flex: 1; flex-direction: column; padding: 20px 22px 22px; }
.rbr-shell--entrada .pase__body > .wp-block-group__inner-container { display: flex; flex: 1; flex-direction: column; gap: 12px; }
.rbr-shell--entrada .pase__body > .wp-block-group__inner-container > * { margin: 0; }
.rbr-shell--entrada .pase__body .pase__tag {
align-self: flex-start; padding: 5px 12px; border-radius: 999px; background: var(--c-sun-50); color: var(--c-sun-ink);
font-size: .66rem; font-weight: 700; letter-spacing: .14em; line-height: 1.2; text-transform: uppercase;
}
.rbr-shell--entrada .pase__body .pase__tag strong { font-weight: 700; color: inherit; }
.rbr-shell--entrada .pase__body h4.wp-block-heading { margin: 0; padding: 0; border: 0; font-family: var(--f-display); font-size: 1.45rem; font-weight: 500; line-height: 1.15; color: var(--c-pine-900); }
.rbr-shell--entrada .pase__body .pase__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; font-family: var(--f-display); line-height: 1.1; color: var(--c-sun-ink); }
.rbr-shell--entrada .pase__body .pase__price strong { font-size: 2rem; font-weight: 500; letter-spacing: -.01em; color: var(--c-sun-ink); }
.rbr-shell--entrada .pase__body .pase__price small { font-family: var(--f-body); font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted); }
.rbr-shell--entrada .pase__body > .wp-block-group__inner-container > p:not(.pase__tag, .pase__price, .pase__ojo) { font-size: .95rem; line-height: 1.6; color: var(--c-ink-2); }
.rbr-shell--entrada .pase__body ul { display: grid; gap: 9px; padding: 0; list-style: none; }
.rbr-shell--entrada .pase__body li { position: relative; margin: 0; padding: 0 0 0 28px; font-size: .92rem; line-height: 1.5; color: var(--c-ink-2); }
.rbr-shell--entrada .pase__body li::before {
content: ""; position: absolute; left: 0; top: .16em; width: 19px; height: 19px; background: var(--c-pine);
-webkit-mask: var(--ico-check-circle) center / contain no-repeat; mask: var(--ico-check-circle) center / contain no-repeat;
}
.rbr-shell--entrada .pase__body ul.pase__no li::before { background: var(--c-sun-ink); -webkit-mask-image: var(--ico-x-circle); mask-image: var(--ico-x-circle); }
.rbr-shell--entrada .pase__body .pase__ojo { margin-top: auto; padding-top: 14px; border-top: 2px dashed var(--c-sand-2); font-size: .9rem; line-height: 1.5; color: var(--c-ink-2); }
/* 7. CONSEJOS CON FOTO (Grupo «rbr-tips» con 6 Grupos «consejo-foto»): foto 5:4 sin recorte; se elevan al pasar el ratón; carrusel en móvil, 2 columnas en escritorio */
.rbr-shell--entrada .rbr-tips {
display: grid; grid-auto-flow: column; grid-auto-columns: min(82%, 320px); gap: 14px; margin: 22px -2px 0; padding: 6px 2px 18px;
overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin;
}
.rbr-shell--entrada .rbr-tips > .wp-block-group__inner-container { display: contents; }
@container (min-width: 560px) {
.rbr-shell--entrada .rbr-tips { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 24px 0 0; padding: 0; overflow: visible; scroll-snap-type: none; }
}
.rbr-shell--entrada .consejo-foto {
display: flex; flex-direction: column; min-width: 0; overflow: hidden; scroll-snap-align: start; background: var(--c-paper); border: 1px solid var(--c-line); border-radius: 24px; box-shadow: var(--shadow-sm);
transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med), border-color var(--t-med);
}
@media (hover: hover) { .rbr-shell--entrada .consejo-foto:hover { transform: translateY(-5px); box-shadow: 0 24px 40px -22px rgba(14, 34, 31, .5); border-color: var(--c-sun); } }
.rbr-shell--entrada .consejo-foto > .wp-block-group__inner-container { display: contents; }
.rbr-shell--entrada .consejo-foto .wp-block-image { margin: 0; }
.rbr-shell--entrada .consejo-foto .wp-block-image .media__frame { border-radius: 0; box-shadow: none; }
.rbr-shell--entrada .consejo-foto .wp-block-image img { width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; border-radius: 0; box-shadow: none; }
.rbr-shell--entrada .consejo-foto .consejo-foto__titulo { margin: 0; padding: 18px 22px 0; font-family: var(--f-display); font-size: 1.25rem; font-weight: 500; line-height: 1.2; color: var(--c-pine-900); transition: color var(--t-med); }
.rbr-shell--entrada .consejo-foto .consejo-foto__titulo strong { font-weight: 500; color: inherit; }
@media (hover: hover) { .rbr-shell--entrada .consejo-foto:hover .consejo-foto__titulo { color: var(--c-sun-ink); } }
.rbr-shell--entrada .consejo-foto p:last-child { margin: 0; padding: 8px 22px 22px; font-size: .96rem; line-height: 1.6; color: var(--c-ink-2); }
/* 8. RESERVAS (Grupo «reservas» con 4 Grupos «reserva»: foto 16:9 + insignia de icono + título + texto + botón) ---------------- */
.rbr-shell--entrada .reservas__titulo { margin: 8px 0 0; font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--c-sun-ink); }
.rbr-shell--entrada .reservas { display: grid; gap: 16px; margin: 14px 0 0; }
.rbr-shell--entrada .reservas > .wp-block-group__inner-container { display: contents; }
@container (min-width: 640px) { .rbr-shell--entrada .reservas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
.rbr-shell--entrada .reserva {
--res-ico: url("data:image/svg+xml;utf8,");
display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--c-paper); border: 1px solid var(--c-line); border-radius: 24px; box-shadow: var(--shadow-sm);
transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med);
}
@media (hover: hover) { .rbr-shell--entrada .reserva:hover { transform: translateY(-5px); box-shadow: 0 24px 40px -22px rgba(14, 34, 31, .5); } }
.rbr-shell--entrada .reserva:nth-child(2) { --res-ico: url("data:image/svg+xml;utf8,"); }
.rbr-shell--entrada .reserva:nth-child(3) { --res-ico: url("data:image/svg+xml;utf8,"); }
.rbr-shell--entrada .reserva:nth-child(4) { --res-ico: url("data:image/svg+xml;utf8,"); }
.rbr-shell--entrada .reserva > .wp-block-group__inner-container { display: flex; flex: 1; flex-direction: column; }
.rbr-shell--entrada .reserva .wp-block-image { margin: 0; }
.rbr-shell--entrada .reserva .wp-block-image .media__frame { border-radius: 0; box-shadow: none; }
.rbr-shell--entrada .reserva .wp-block-image img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0; box-shadow: none; }
.rbr-shell--entrada .reserva__cuerpo { position: relative; flex: 1; padding: 36px 22px 22px; }
.rbr-shell--entrada .reserva__cuerpo > .wp-block-group__inner-container { display: flex; height: 100%; flex-direction: column; }
.rbr-shell--entrada .reserva__cuerpo::before {
content: ""; position: absolute; left: 22px; top: -24px; z-index: 2; width: 48px; height: 48px; border: 4px solid var(--c-paper); border-radius: 16px;
background: var(--c-pine) var(--res-ico) center / 22px no-repeat; box-shadow: var(--shadow-sm); transition: transform var(--t-med) var(--ease-out);
}
@media (hover: hover) { .rbr-shell--entrada .reserva:hover .reserva__cuerpo::before { transform: rotate(-8deg) scale(1.1); } }
.rbr-shell--entrada .reserva:nth-child(even) .reserva__cuerpo::before { background-color: #1d6679; }
.rbr-shell--entrada .reserva .reserva__titulo { margin: 0 0 8px; font-family: var(--f-display); font-size: 1.2rem; font-weight: 500; line-height: 1.25; color: var(--c-pine-900); }
.rbr-shell--entrada .reserva .reserva__titulo strong { font-weight: 500; color: inherit; }
.rbr-shell--entrada .reserva__cuerpo p:not(.reserva__titulo) { margin: 0; font-size: .96rem; line-height: 1.6; color: var(--c-ink-2); }
.rbr-shell--entrada .reserva .cta-row { margin-block: auto 0; padding-top: 18px; }
/* 9. VEREDICTO (lista «rbr-tarifas» con la clase veredicto: etiqueta pequeña · nombre · frase en texto normal) ---------------- */
.rbr-shell--entrada .is-style-rbr-tarifas.veredicto li { font-size: .95rem; font-weight: 400; letter-spacing: 0; line-height: 1.5; text-transform: none; color: var(--c-ink-2); }
.rbr-shell--entrada .veredicto li small { display: block; font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--c-sun-ink); }
/* 10. TARJETA DE LUGAR (Grupo «lugar»: foto sin recorte + texto + enlace «Ver en Google Maps» como botón-pastilla con pin) ------- */
.rbr-shell--entrada .lugar { overflow: hidden; margin: 28px 0 0; background: var(--c-paper); border: 1px solid var(--c-line); border-radius: 24px; box-shadow: var(--shadow-sm); }
.rbr-shell--entrada .lugar .wp-block-image { margin: 0; }
.rbr-shell--entrada .lugar .wp-block-image .media__frame { border-radius: 0; box-shadow: none; }
.rbr-shell--entrada .lugar .wp-block-image img { height: auto; aspect-ratio: 16 / 9; border-radius: 0; box-shadow: none; }
.rbr-shell--entrada .lugar__cuerpo { padding: 20px 24px 24px; }
.rbr-shell--entrada .lugar__cuerpo > .wp-block-group__inner-container { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.rbr-shell--entrada .lugar__cuerpo p { margin: 0; }
.rbr-shell--entrada .prose .lugar__mapa a:not(.btn, .anchor, .wp-block-button__link),
.rbr-shell--entrada .prose .lugar__mapa a:not(.btn, .anchor, .wp-block-button__link):visited {
display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px 0 14px; border-radius: 999px; background: var(--c-pine); color: var(--c-cream);
font-size: .92rem; font-weight: 600; text-decoration: none; transition: background var(--t-fast), transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast);
}
.rbr-shell--entrada .prose .lugar__mapa a:not(.btn, .anchor, .wp-block-button__link):is(:hover, :focus-visible) {
background: var(--c-sun); color: var(--c-ink); transform: translateY(-2px); box-shadow: 0 12px 22px -12px rgba(176, 100, 0, .7);
}
.rbr-shell--entrada .lugar__mapa a::before {
content: ""; width: 18px; height: 18px; background: var(--c-sun); -webkit-mask: var(--ico-pin) center / contain no-repeat; mask: var(--ico-pin) center / contain no-repeat; transition: background var(--t-fast);
}
.rbr-shell--entrada .lugar__mapa a:is(:hover, :focus-visible)::before { background: var(--c-ink); }
/* 11. FOTOS EN PAREJA (Grupo «fotos-2» con 2 figuras con pie; «fotos-2--v» = verticales 3:4) -------------------------------- */
.rbr-shell--entrada .fotos-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 22px 0 0; }
.rbr-shell--entrada .fotos-2 > .wp-block-group__inner-container { display: contents; }
.rbr-shell--entrada .fotos-2 .wp-block-image { margin: 0; }
.rbr-shell--entrada .fotos-2 .wp-block-image img { aspect-ratio: 4 / 3; }
.rbr-shell--entrada .fotos-2--v .wp-block-image img { aspect-ratio: 3 / 4; }
/* 12. ABONOS: etiqueta del precio dentro del nombre de la tarjeta */
.rbr-shell--entrada .tcard__name small { display: block; margin-top: 6px; font-family: var(--f-body); font-size: .68rem; font-weight: 600; letter-spacing: .1em; line-height: 1.2; text-transform: uppercase; opacity: .8; }
/* 13. CUÁNDO IR · tabla de estaciones (comparte el diseño de «horario» con 4 columnas y un color por época) ------------------------ */
.rbr-shell--entrada .is-style-rbr-estaciones th { box-sizing: border-box; padding-inline: 20px; }
.rbr-shell--entrada .is-style-rbr-estaciones th:first-child { width: 21%; }
.rbr-shell--entrada .is-style-rbr-estaciones th:nth-child(2) { width: 28%; }
.rbr-shell--entrada .is-style-rbr-estaciones th:nth-child(3) { width: 16%; }
.rbr-shell--entrada .is-style-rbr-estaciones td { padding: 18px 20px; font-size: .9rem; }
.rbr-shell--entrada .is-style-rbr-estaciones td strong { color: var(--c-pine-900); }
.rbr-shell--entrada .is-style-rbr-estaciones tbody tr:nth-child(3) td:first-child { --dia-bg: linear-gradient(135deg, #d9772b 0%, #b5541a 55%, #d9772b 100%); color: #fff; }
.rbr-shell--entrada .is-style-rbr-estaciones tbody tr:nth-child(3) td:first-child strong { background: rgba(255, 255, 255, .18); }
.rbr-shell--entrada .is-style-rbr-estaciones tbody tr:nth-child(4) td:first-child { --dia-bg: linear-gradient(135deg, #2a8ba5 0%, #1d6679 55%, #2a8ba5 100%); color: var(--c-cream); }
.rbr-shell--entrada .is-style-rbr-estaciones tbody tr:nth-child(2) td:first-child strong,
.rbr-shell--entrada .is-style-rbr-estaciones tbody tr:nth-child(2) td:first-child { color: var(--c-ink); }
.rbr-shell--entrada .is-style-rbr-estaciones td:first-child strong { color: inherit; }
.rbr-shell--entrada .is-style-rbr-estaciones td:first-child em {
display: block; width: fit-content; margin: 10px 0 0; padding: 3px 11px 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--c-pine-800);
font-family: var(--f-body); font-style: normal; font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.rbr-shell--entrada .is-style-rbr-estaciones td:first-child em::before { content: "★ "; color: var(--c-sun-600); }
@container (max-width: 639px) {
.rbr-shell--entrada .is-style-rbr-estaciones td:nth-child(2)::before { content: "Clima"; }
.rbr-shell--entrada .is-style-rbr-estaciones td:nth-child(3)::before { content: "Afluencia"; }
.rbr-shell--entrada .is-style-rbr-estaciones td:nth-child(4)::before { content: "A tener en cuenta"; }
.rbr-shell--entrada .is-style-rbr-estaciones td { padding: 12px 20px; }
.rbr-shell--entrada .is-style-rbr-estaciones td:first-child { padding: 18px 20px; }
}
/* 14. PLAN B · dos tarjetas (lluvia / calor) con lista clave-valor ------------------------------------------------------------- */
.rbr-shell--entrada .clima-plan { margin: 22px 0 0; }
.rbr-shell--entrada .clima-plan > .wp-block-group__inner-container { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@container (min-width: 700px) { .rbr-shell--entrada .clima-plan > .wp-block-group__inner-container { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rbr-shell--entrada .clima-plan__card {
overflow: hidden; background: var(--c-paper); border: 1px solid var(--c-line); border-radius: 22px; box-shadow: var(--shadow-sm);
transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med), border-color var(--t-med);
}
.rbr-shell--entrada .clima-plan__titulo {
display: flex; align-items: center; gap: 12px; margin: 0; padding: 16px 22px; color: var(--c-cream);
background: linear-gradient(135deg, #2a8ba5 0%, #1d6679 100%); font-family: var(--f-display); font-size: 1.2rem; font-weight: 500;
}
.rbr-shell--entrada .clima-plan__titulo span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .2); font-size: 1.25rem; transition: transform var(--t-med) var(--ease-out); }
.rbr-shell--entrada .clima-plan__card--calor .clima-plan__titulo { color: var(--c-ink); background: linear-gradient(135deg, #ffb238 0%, var(--c-sun) 100%); }
.rbr-shell--entrada .clima-plan__card--calor .clima-plan__titulo span { background: rgba(14, 34, 31, .12); }
.rbr-shell--entrada .clima-plan__card ul { margin: 0; padding: 8px 22px 14px; }
.rbr-shell--entrada .clima-plan__card ul.is-style-rbr-clave-valor { margin-block: 0; border-top: 0; }
.rbr-shell--entrada .clima-plan__card ul.is-style-rbr-clave-valor li:has(> strong:first-child) { display: block; padding-left: 22px; }
.rbr-shell--entrada .clima-plan__card ul.is-style-rbr-clave-valor li > strong:first-child { float: none; display: block; width: auto; margin: 0 0 2px; }
.rbr-shell--entrada .clima-plan__card ul.is-style-rbr-clave-valor li:last-child { border-bottom: 0; }
@media (hover: hover) {
.rbr-shell--entrada .clima-plan__card:hover { transform: translateY(-5px); border-color: var(--c-sun); box-shadow: 0 22px 36px -22px rgba(14, 34, 31, .55); }
.rbr-shell--entrada .clima-plan__card:hover .clima-plan__titulo span { transform: rotate(-12deg) scale(1.12); }
}
/* 15. PRESUPUESTO · tabla de 3 niveles: cabecera de color, filas con hover, total oscuro. Móvil: una tarjeta por partida ---------- */
.rbr-shell--entrada .wp-block-table.is-style-rbr-presupuesto { margin: 22px 0 0; overflow: hidden; background: var(--c-paper); border: 1px solid var(--c-line); border-radius: 22px; box-shadow: var(--shadow-sm); }
.rbr-shell--entrada .is-style-rbr-presupuesto table { width: 100%; margin: 0; border: 0; border-collapse: collapse; table-layout: fixed; font-size: .92rem; line-height: 1.4; }
.rbr-shell--entrada .is-style-rbr-presupuesto :is(th, td) { padding: 16px 18px; border: 0; border-top: 1px solid var(--c-line); text-align: left; vertical-align: middle; background: transparent; color: var(--c-ink-2); transition: background-color var(--t-med); }
.rbr-shell--entrada .is-style-rbr-presupuesto thead th { border: 0; font-family: var(--f-body); font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--c-muted); background: var(--c-sand); }
.rbr-shell--entrada .is-style-rbr-presupuesto thead th:nth-child(2) { background: var(--c-pine); color: var(--c-cream); }
.rbr-shell--entrada .is-style-rbr-presupuesto thead th:nth-child(3) { background: var(--c-sun); color: var(--c-ink); }
.rbr-shell--entrada .is-style-rbr-presupuesto thead th:nth-child(4) { background: #1d6679; color: var(--c-cream); }
.rbr-shell--entrada .is-style-rbr-presupuesto th:first-child { width: 31%; }
.rbr-shell--entrada .is-style-rbr-presupuesto tbody th { font-family: var(--f-display); font-size: 1.05rem; font-weight: 500; color: var(--c-ink); }
.rbr-shell--entrada .is-style-rbr-presupuesto small { display: block; margin-top: 3px; font-family: var(--f-body); font-size: .76rem; font-weight: 400; line-height: 1.35; color: var(--c-muted); }
.rbr-shell--entrada .is-style-rbr-presupuesto td strong { display: block; font-family: var(--f-display); font-size: 1.35rem; font-weight: 500; line-height: 1.1; color: var(--c-pine-900); transition: transform var(--t-med) var(--ease-out); }
.rbr-shell--entrada .is-style-rbr-presupuesto tbody td:nth-child(3) { background: rgba(243, 156, 18, .06); }
.rbr-shell--entrada .is-style-rbr-presupuesto tfoot :is(th, td) { border-top: 0; }
.rbr-shell--entrada .is-style-rbr-presupuesto tfoot tr:first-child :is(th, td) { background: var(--c-pine-900); color: var(--c-cream); border-top: 1px solid var(--c-pine-900); }
.rbr-shell--entrada .is-style-rbr-presupuesto tfoot tr:first-child th { font-family: var(--f-display); font-size: 1.1rem; font-weight: 500; }
.rbr-shell--entrada .is-style-rbr-presupuesto tfoot tr:first-child td strong { font-size: 1.7rem; color: var(--c-cream); }
.rbr-shell--entrada .is-style-rbr-presupuesto tfoot tr:last-child :is(th, td) { background: var(--c-sand); }
.rbr-shell--entrada .is-style-rbr-presupuesto tfoot tr:last-child th { font-family: var(--f-body); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--c-muted); }
.rbr-shell--entrada .is-style-rbr-presupuesto tfoot tr:last-child td strong { font-size: 1.1rem; color: var(--c-ink-2); }
.rbr-shell--entrada .is-style-rbr-presupuesto figcaption { margin: 0; padding: 12px 18px; border-top: 1px solid var(--c-line); background: var(--c-paper); color: var(--c-muted); font-size: .78rem; text-align: left; }
@media (hover: hover) {
.rbr-shell--entrada .is-style-rbr-presupuesto tbody tr:hover :is(th, td) { background-color: var(--c-sun-50); }
.rbr-shell--entrada .is-style-rbr-presupuesto tbody tr:hover td strong { transform: translateY(-3px); }
}
@container (max-width: 639px) {
.rbr-shell--entrada .wp-block-table.is-style-rbr-presupuesto { overflow: visible; background: none; border: 0; box-shadow: none; }
.rbr-shell--entrada .is-style-rbr-presupuesto :is(table, tbody, tfoot, tr) { display: block; }
.rbr-shell--entrada .is-style-rbr-presupuesto thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.rbr-shell--entrada .is-style-rbr-presupuesto tr { margin: 0 0 12px; overflow: hidden; background: var(--c-paper); border: 1px solid var(--c-line); border-radius: 20px; box-shadow: var(--shadow-sm); }
.rbr-shell--entrada .is-style-rbr-presupuesto :is(th, td) { display: block; width: auto; padding: 12px 18px; }
.rbr-shell--entrada .is-style-rbr-presupuesto th:first-child { width: auto; background: var(--c-sand); }
.rbr-shell--entrada .is-style-rbr-presupuesto td { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 4px 12px; align-items: baseline; }
.rbr-shell--entrada .is-style-rbr-presupuesto td::before { grid-row: 1 / span 2; font-size: .64rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--c-sun-ink); }
.rbr-shell--entrada .is-style-rbr-presupuesto td:nth-child(2)::before { content: "Ajustado"; }
.rbr-shell--entrada .is-style-rbr-presupuesto td:nth-child(3)::before { content: "Medio"; }
.rbr-shell--entrada .is-style-rbr-presupuesto td:nth-child(4)::before { content: "Cómodo"; }
.rbr-shell--entrada .is-style-rbr-presupuesto tbody td:nth-child(3) { background: none; }
.rbr-shell--entrada .is-style-rbr-presupuesto tfoot tr:first-child { background: var(--c-pine-900); border-color: var(--c-pine-900); }
.rbr-shell--entrada .is-style-rbr-presupuesto tfoot tr:first-child td::before { color: var(--c-sun); }
.rbr-shell--entrada .is-style-rbr-presupuesto figcaption { margin: 4px 0 0; border: 0; background: none; padding: 0 4px; }
}
/* 16. HERRAMIENTAS · calculadora de pases y conversor (tarjetas con barra de color, campos grandes y estados claros) ------------- */
.rbr-shell--entrada :is(.rbr-calc, .rbr-conv) {
position: relative; margin: 18px 0 0; padding: clamp(20px, 3.2vw, 30px); overflow: hidden; background: linear-gradient(180deg, var(--c-paper) 0%, var(--c-sand) 100%);
border: 1px solid var(--c-line); border-radius: 24px; box-shadow: var(--shadow-sm);
}
.rbr-shell--entrada :is(.rbr-calc, .rbr-conv)::before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; background: linear-gradient(90deg, var(--c-pine), var(--c-sun), #2a8ba5); }
.rbr-shell--entrada .rbr-calc:not(.is-activo) { display: none; }
.rbr-shell--entrada .rbr-calc__intro { margin: 0 0 18px; color: var(--c-muted); font-size: .95rem; }
.rbr-shell--entrada .rbr-calc__grupo { min-width: 0; margin: 0 0 18px; padding: 0; border: 0; }
.rbr-shell--entrada .rbr-calc__grupo legend { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; padding: 0; font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--c-ink); }
.rbr-shell--entrada .rbr-calc__grupo legend b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--c-pine); color: var(--c-cream); font-size: .74rem; letter-spacing: 0; }
.rbr-shell--entrada .rbr-calc__ops { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.rbr-shell--entrada .rbr-calc__ops--prior { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.rbr-shell--entrada .rbr-calc__op { position: relative; display: block; cursor: pointer; }
.rbr-shell--entrada .rbr-calc__op input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.rbr-shell--entrada .rbr-calc__op > span {
position: relative; display: flex; flex-direction: column; gap: 2px; padding: 12px 14px 12px 46px; background: #fff; border: 1.5px solid var(--c-line); border-radius: 14px;
transition: transform var(--t-fast), border-color var(--t-fast), background-color var(--t-fast), box-shadow var(--t-med);
}
.rbr-shell--entrada .rbr-calc__op strong { font-size: .92rem; line-height: 1.25; color: var(--c-ink); }
.rbr-shell--entrada .rbr-calc__op small { font-size: .76rem; color: var(--c-muted); }
.rbr-shell--entrada .rbr-calc__op > span::before { content: ""; position: absolute; left: 14px; top: 50%; width: 20px; height: 20px; margin-top: -10px; border: 2px solid rgba(26, 26, 26, .28); border-radius: 6px; background: #fff; transition: background-color var(--t-fast), border-color var(--t-fast); }
.rbr-shell--entrada .rbr-calc__op input[type="radio"] + span::before { border-radius: 50%; }
.rbr-shell--entrada .rbr-calc__op > span::after { content: ""; position: absolute; left: 21px; top: 50%; width: 6px; height: 11px; margin-top: -8px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) scale(0); transition: transform var(--t-fast) var(--ease-out); }
.rbr-shell--entrada .rbr-calc__op input:checked + span { background: var(--c-sun-50); border-color: var(--c-sun); box-shadow: 0 10px 20px -16px rgba(176, 100, 0, .8); }
.rbr-shell--entrada .rbr-calc__op input:checked + span::before { background: var(--c-pine); border-color: var(--c-pine); }
.rbr-shell--entrada .rbr-calc__op input:checked + span::after { transform: rotate(45deg) scale(1); }
.rbr-shell--entrada .rbr-calc__op input:focus-visible + span { outline: 3px solid var(--c-pine); outline-offset: 2px; }
@media (hover: hover) { .rbr-shell--entrada .rbr-calc__op:hover > span { transform: translateY(-2px); border-color: var(--c-sun); } }
.rbr-shell--entrada .rbr-calc__res { margin-top: 4px; }
.rbr-shell--entrada .rbr-calc__ganador { overflow: hidden; color: var(--c-cream); background: linear-gradient(135deg, var(--c-pine-900), var(--c-pine)); border-radius: 20px; animation: rbr-sube .5s var(--ease-out); }
.rbr-shell--entrada .rbr-calc__top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; padding: 18px 22px 12px; }
.rbr-shell--entrada .rbr-calc__tag { display: block; width: 100%; margin: 0; font-size: .66rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--c-sun); }
.rbr-shell--entrada .rbr-calc__nombre { margin: 0; font-family: var(--f-display); font-size: 1.55rem; font-weight: 500; line-height: 1.15; color: var(--c-cream); }
.rbr-shell--entrada .rbr-calc__precio { margin: 0; font-family: var(--f-display); font-size: 1.55rem; color: var(--c-sun); }
.rbr-shell--entrada .rbr-calc__lista { margin: 0; padding: 0 22px 8px; list-style: none; }
.rbr-shell--entrada .rbr-calc__lista li { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 12px; margin: 0; padding: 10px 0; border-top: 1px solid var(--c-line-light); font-size: .9rem; line-height: 1.45; color: rgba(253, 252, 240, .92); }
.rbr-shell--entrada .rbr-calc__lista li::before { content: none; }
.rbr-shell--entrada .rbr-calc__lista b { font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--c-sun); padding-top: 3px; }
.rbr-shell--entrada .rbr-calc__lista .tot { color: #fff; font-weight: 600; }
.rbr-shell--entrada .rbr-calc__pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; padding: 14px 22px 20px; border-top: 1px solid var(--c-line-light); background: rgba(0, 0, 0, .14); }
.rbr-shell--entrada .rbr-calc__nota { margin: 0; flex: 1 1 260px; font-size: .8rem; line-height: 1.5; color: rgba(253, 252, 240, .78); }
.rbr-shell--entrada .rbr-calc__vacio { margin: 0; padding: 18px 20px; text-align: center; color: var(--c-muted); background: #fff; border: 1.5px dashed var(--c-line); border-radius: 16px; }
@keyframes rbr-sube { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@container (max-width: 520px) { .rbr-shell--entrada .rbr-calc__lista li { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
.rbr-shell--entrada .rbr-conv__fila { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; align-items: end; }
.rbr-shell--entrada .rbr-conv__campo { position: relative; display: block; }
.rbr-shell--entrada .rbr-conv__campo > span { display: block; margin: 0 0 6px 4px; font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--c-muted); }
.rbr-shell--entrada .rbr-conv__campo input {
box-sizing: border-box; width: 100%; margin: 0; padding: 13px 42px 13px 16px; border: 1.5px solid var(--c-line); border-radius: 16px; background: #fff; color: var(--c-pine-900);
font-family: var(--f-display); font-size: 1.6rem; line-height: 1.2; transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.rbr-shell--entrada .rbr-conv__campo input:focus { outline: 0; border-color: var(--c-sun); box-shadow: 0 0 0 4px rgba(243, 156, 18, .22); }
.rbr-shell--entrada .rbr-conv__campo i { position: absolute; right: 16px; bottom: 15px; font-style: normal; font-family: var(--f-display); font-size: 1.15rem; color: var(--c-sun-ink); pointer-events: none; }
.rbr-shell--entrada .rbr-conv__swap { display: grid; place-items: center; width: 46px; height: 46px; margin: 0 0 4px; padding: 0; border: 0; border-radius: 50%; background: var(--c-pine); color: var(--c-cream); cursor: pointer; transition: transform var(--t-med) var(--ease-out), background var(--t-fast); }
.rbr-shell--entrada .rbr-conv__swap svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.rbr-shell--entrada .rbr-conv__swap:is(:hover, :focus-visible) { background: var(--c-sun); color: var(--c-ink); transform: rotate(180deg); }
.rbr-shell--entrada .rbr-conv__nota { margin: 14px 0 0; font-size: .8rem; line-height: 1.5; color: var(--c-muted); }
.rbr-shell--entrada .rbr-conv__rapido { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.rbr-shell--entrada .rbr-conv__rapido li { margin: 0; padding: 0; }
.rbr-shell--entrada .rbr-conv__rapido li::before { content: none; }
.rbr-shell--entrada .rbr-conv__rapido button { padding: 7px 14px; border: 1.5px solid var(--c-line); border-radius: 999px; background: #fff; color: var(--c-ink-2); font: 600 .78rem var(--f-body); cursor: pointer; transition: transform var(--t-fast), background var(--t-fast), border-color var(--t-fast); }
.rbr-shell--entrada .rbr-conv__rapido button:is(:hover, :focus-visible) { transform: translateY(-2px); background: var(--c-sun-50); border-color: var(--c-sun); }
@container (max-width: 520px) {
.rbr-shell--entrada .rbr-conv__fila { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.rbr-shell--entrada .rbr-conv__swap { margin: 0 auto; transform: rotate(90deg); }
.rbr-shell--entrada .rbr-conv__swap:is(:hover, :focus-visible) { transform: rotate(270deg); }
}
/* 17. LLEVA LA RUTA CONTIGO · PDF + mapas (abrir / KML): tarjeta clara con barra de color; dos paneles blancos --------------------- */
.rbr-shell--entrada .ruta-portatil { position: relative; margin: 24px 0 0; padding: clamp(20px, 3.2vw, 30px); overflow: hidden; background: linear-gradient(180deg, var(--c-paper) 0%, var(--c-sun-50) 100%); border: 1px solid var(--c-line); border-radius: 26px; box-shadow: var(--shadow-sm); }
.rbr-shell--entrada .ruta-portatil::before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; background: linear-gradient(90deg, var(--c-pine), var(--c-sun), #2a8ba5); }
.rbr-shell--entrada .prose .ruta-portatil p.ruta-portatil__titulo { margin: 0 0 6px; font-family: var(--f-display); font-size: 1.45rem; font-weight: 500; line-height: 1.2; color: var(--c-pine-900); }
.rbr-shell--entrada .ruta-portatil__cols > .wp-block-group__inner-container { display: grid; gap: 14px; margin-top: 16px; grid-template-columns: minmax(0, 1fr); }
@container (min-width: 700px) { .rbr-shell--entrada .ruta-portatil__cols > .wp-block-group__inner-container { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
.rbr-shell--entrada .ruta-portatil__cols > .wp-block-group__inner-container > .wp-block-group { padding: 18px; background: #fff; border: 1px solid var(--c-line); border-radius: 18px; box-shadow: var(--shadow-sm); transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med), border-color var(--t-med); }
@media (hover: hover) { .rbr-shell--entrada .ruta-portatil__cols > .wp-block-group__inner-container > .wp-block-group:hover { transform: translateY(-3px); border-color: var(--c-sun); box-shadow: 0 18px 30px -22px rgba(14, 34, 31, .55); } }
.rbr-shell--entrada :is(.ruta-portatil__pdf-t, .ruta-portatil__mapas-t) { margin: 0 0 12px; }
.rbr-shell--entrada :is(.ruta-portatil__pdf-t, .ruta-portatil__mapas-t) strong { display: block; font-family: var(--f-display); font-size: 1.15rem; font-weight: 500; color: var(--c-ink); }
.rbr-shell--entrada :is(.ruta-portatil__pdf-t, .ruta-portatil__mapas-t) small { display: block; margin-top: 2px; font-size: .78rem; color: var(--c-muted); }
.rbr-shell--entrada .ruta-portatil__pdf .cta-row { justify-content: flex-start; margin: 0; }
.rbr-shell--entrada .ruta-portatil__mapas ul { margin: 0; padding: 0; list-style: none; }
.rbr-shell--entrada .ruta-portatil__mapas li { display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 0; border-top: 1px solid var(--c-line); }
.rbr-shell--entrada .ruta-portatil__mapas li::before { content: none; }
.rbr-shell--entrada .ruta-portatil__mapas li span { flex: 1; font-size: .92rem; font-weight: 600; color: var(--c-ink); }
.rbr-shell--entrada .ruta-portatil__mapas li a:not(.btn, .anchor, .wp-block-button__link) { padding: 5px 14px; border: 1.5px solid var(--c-pine); border-radius: 999px; background: transparent; color: var(--c-pine); font-size: .78rem; font-weight: 700; text-decoration: none; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast); }
.rbr-shell--entrada .ruta-portatil__mapas li a:not(.btn, .anchor, .wp-block-button__link):is(:hover, :focus-visible) { background: var(--c-sun); border-color: var(--c-sun); color: var(--c-ink); transform: translateY(-2px); }
/* 18. DESTINO RESALTADO de los enlaces internos a una parada */
.rbr-shell--entrada :is(.parada, #dia3-opciones) { scroll-margin-top: 100px; }
.rbr-shell--entrada .parada:target h4 { animation: rbr-diana 2s var(--ease-out); }
@keyframes rbr-diana { 0% { background: var(--c-sun-50); box-shadow: 0 0 0 12px var(--c-sun-50); border-radius: 12px; } 100% { background: transparent; box-shadow: 0 0 0 12px transparent; } }
@media (prefers-reduced-motion: reduce) {
.rbr-shell--entrada :is(.rbr-dia, .rbr-dia__n, .rbr-dia h3, .rbr-dia::after, .pase, .consejo-foto, .reserva, .reserva__cuerpo::before, .is-style-rbr-horario td, .is-style-rbr-horario td strong, .is-style-rbr-estaciones td, .is-style-rbr-estaciones td strong, .parada h4::before, .clima-plan__card, .clima-plan__titulo span, .rbr-calc__op > span, .rbr-conv__swap, .ruta-portatil__cols > .wp-block-group__inner-container > .wp-block-group, .is-style-rbr-presupuesto td strong) { transition: none; animation: none; }
.rbr-shell--entrada :is(.rbr-dia, .pase, .consejo-foto, .reserva, .is-style-rbr-horario td, .is-style-rbr-estaciones td, .clima-plan__card, .rbr-calc__op > span):hover { transform: none; }
.rbr-shell--entrada :is(.parada:target h4, .rbr-calc__ganador) { animation: none; }
}
}