/*
Theme Name: Kroa Tour
Theme URI: https://kroa.net
Description: Child theme de Kadence para Kroa Tour. Identidad editorial premium: fondos cálidos, verde oliva, terracota y tipografía Playfair Display + Inter. Evita deliberadamente la estética OTA y el azul turístico.
Author: Kroa Tour
Author URI: https://kroa.net
Template: kadence
Version: 1.0.0
Requires PHP: 8.1
Text Domain: kroa
Tags: travel, editorial, woocommerce, block-editor
*/
/* ═══════════════════════════════════════════════════════════════
1 · TOKENS DE MARCA
Sobrescribimos las variables globales de Kadence: todo lo que el
tema pinta aguas abajo (botones, enlaces, cabecera, Woo) hereda
de aquí, así que la paleta queda aplicada de forma consistente.
═══════════════════════════════════════════════════════════════ */
:root {
/* — Fondos — */
--kroa-blanco-calido: #fdfbf7;
--kroa-hueso: #f4efe6;
--kroa-arena: #e7dcca;
--kroa-arena-honda: #d8c9b1;
/* — Primario — */
--kroa-oliva: #6e7a4f;
--kroa-oliva-claro: #8d9a6c;
--kroa-oliva-tenue: #eceee4;
/* — Secundarios — */
--kroa-terracota: #b0603c;
--kroa-terracota-alt: #8f4b2d;
--kroa-cobre: #c4855a;
/* — Firma de marca: la rana de ojos rojos del logo —
Valores muestreados del propio logo. Es el único color saturado del
sistema y se reserva para los momentos de energía (hover, estado
activo, la rana). Todo lo demás se mantiene apagado a propósito para
que este verde tenga dónde destacar. */
--kroa-rana: #87b338;
--kroa-rana-viva: #b7ca2d;
--kroa-rana-honda: #5f7f26;
--kroa-turquesa: #558d91;
/* — Escala de espaciado —
Una sola escala para todo el sitio. Antes cada sección improvisaba su
propio padding y el resultado eran huecos de tamaños arbitrarios. */
--e1: .5rem;
--e2: .875rem;
--e3: 1.25rem;
--e4: 2rem;
--e5: 3rem;
--e6: 4.5rem;
--e7: 6.5rem;
--e8: 9rem;
/* — Contenedor —
Ancho y canal únicos: el desalineado entre título, bajada y tarjetas
venía de que cada bloque declaraba su propio ancho. */
--kroa-ancho: 1280px;
--kroa-ancho-texto: 68ch;
--kroa-canal: clamp(1.25rem, 5vw, 4rem);
/* — Texto — */
--kroa-grafito: #2a2a28;
--kroa-carbon: #4a4a44;
--kroa-tenue: #7a776c;
/* — CTA — */
--kroa-verde-hondo: #2e4432;
--kroa-verde-hondo-h: #1f3023;
--kroa-whatsapp: #25d366;
--kroa-whatsapp-h: #1da851;
/* — Estructura — */
--kroa-borde: #e4dbcd;
--kroa-radio: 4px;
--kroa-radio-card: 6px;
--kroa-sombra: 0 1px 2px rgba(42, 42, 40, .04), 0 8px 24px -12px rgba(42, 42, 40, .12);
--kroa-sombra-alta: 0 2px 4px rgba(42, 42, 40, .05), 0 18px 44px -18px rgba(42, 42, 40, .22);
--kroa-transicion: 240ms cubic-bezier(.22, .61, .36, 1);
/* — Tipografía — */
--kroa-serif: "Playfair Display", "Cormorant Garamond", Georgia, "Times New Roman", serif;
--kroa-sans: "Inter", "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
/* ── Mapeo sobre la paleta global de Kadence ────────────── */
--global-palette1: var(--kroa-oliva);
--global-palette2: var(--kroa-verde-hondo);
--global-palette3: var(--kroa-grafito);
--global-palette4: var(--kroa-carbon);
--global-palette5: var(--kroa-tenue);
--global-palette6: var(--kroa-arena);
--global-palette7: var(--kroa-hueso);
--global-palette8: var(--kroa-blanco-calido);
--global-palette9: #ffffff;
--global-palette-highlight: var(--kroa-terracota);
--global-palette-highlight-alt: var(--kroa-terracota-alt);
--global-palette-highlight-alt2: #ffffff;
--global-palette-btn: #ffffff;
--global-palette-btn-hover: #ffffff;
--global-palette-btn-bg: var(--kroa-verde-hondo);
--global-palette-btn-bg-hover: var(--kroa-verde-hondo-h);
--global-content-width: 1200px;
--global-content-narrow-width: 780px;
--global-body-font-family: var(--kroa-sans);
--global-heading-font-family: var(--kroa-serif);
--global-primary-nav-font-family: var(--kroa-sans);
}
/* ═══════════════════════════════════════════════════════════════
2 · BASE EDITORIAL
═══════════════════════════════════════════════════════════════ */
body {
background-color: var(--kroa-blanco-calido);
color: var(--kroa-carbon);
font-family: var(--kroa-sans);
font-size: 1.0625rem;
line-height: 1.72;
font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* Red de seguridad contra el desplazamiento horizontal en móvil: un solo
elemento que se pase de ancho arrastra toda la página y corta el texto.
`clip` en lugar de `hidden` para no crear un contexto de scroll que
rompería la cabecera adherida. */
html, body { overflow-x: clip; max-width: 100%; }
/* Ningún contenedor del tema debe superar el ancho de la ventana. */
.kroa-hero,
.kroa-hero__inner,
.kroa-section,
.kroa-contenedor { max-width: 100%; }
/* Palabras largas (nombres de destino, URLs) parten en vez de desbordar. */
h1, h2, h3, h4, p, li, a { overflow-wrap: break-word; }
h1, h2, h3, h4, h5, h6,
.entry-title,
.woocommerce-loop-product__title,
.product_title {
font-family: var(--kroa-serif);
color: var(--kroa-grafito);
font-weight: 500;
letter-spacing: -.012em;
line-height: 1.16;
text-wrap: balance;
}
h1 { font-size: clamp(2.25rem, 1.35rem + 3.6vw, 4rem); }
h2 { font-size: clamp(1.85rem, 1.2rem + 2.4vw, 3rem); line-height: 1.2; }
h3 { font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.9rem); line-height: 1.28; }
h4 { font-size: clamp(1.15rem, 1.02rem + .55vw, 1.4rem); line-height: 1.35; }
p { text-wrap: pretty; }
/* ═══════════════════════════════════════════════════════════════
BLOG - Estilos para la página y posts del blog
═══════════════════════════════════════════════════════════════ */
.kroa-blog { padding: var(--e5) var(--kroa-canal); }
.kroa-blog__header { text-align: center; margin-bottom: var(--e6); }
.kroa-blog__title {
font-family: var(--kroa-serif);
font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem);
font-weight: 500;
color: var(--kroa-grafito);
margin-bottom: var(--e2);
}
.kroa-blog__description {
font-size: clamp(1.06rem, 1rem + .35vw, 1.28rem);
color: var(--kroa-carbon);
max-width: 62ch;
margin-inline: auto;
}
.kroa-blog__posts {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: var(--e4);
margin-bottom: var(--e5);
}
.kroa-blog__post {
background: white;
border-radius: var(--kroa-radio-card);
overflow: hidden;
box-shadow: var(--kroa-sombra);
transition: transform var(--kroa-transicion), box-shadow var(--kroa-transicion);
}
.kroa-blog__post:hover {
transform: translateY(-4px);
box-shadow: var(--kroa-sombra-alta);
}
.kroa-blog__post-image {
width: 100%;
height: 220px;
overflow: hidden;
}
.kroa-blog__post-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--kroa-transicion);
}
.kroa-blog__post:hover .kroa-blog__post-image img { transform: scale(1.05); }
.kroa-blog__post-content { padding: var(--e3); }
.kroa-blog__post-title {
font-family: var(--kroa-serif);
font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem);
font-weight: 500;
margin-bottom: var(--e2);
line-height: 1.28;
}
.kroa-blog__post-title a {
color: var(--kroa-grafito);
text-decoration: none;
transition: color var(--kroa-transicion);
}
.kroa-blog__post-title a:hover { color: var(--kroa-oliva); }
.kroa-blog__post-meta {
font-size: .93rem;
color: var(--kroa-tenue);
margin-bottom: var(--e3);
}
.kroa-blog__post-excerpt {
font-size: .98rem;
color: var(--kroa-carbon);
line-height: 1.62;
margin-bottom: var(--e3);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.kroa-blog__post-link {
display: inline-block;
color: var(--kroa-verde-hondo);
font-weight: 600;
font-size: .93rem;
text-decoration: none;
transition: color var(--kroa-transicion);
}
.kroa-blog__post-link:hover { color: var(--kroa-terracota); }
/* Post individual */
.kroa-post { padding: var(--e5) var(--kroa-canal); }
.kroa-post__header { margin-bottom: var(--e4); }
.kroa-post__title {
font-family: var(--kroa-serif);
font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
font-weight: 500;
color: var(--kroa-grafito);
margin-bottom: var(--e2);
}
.kroa-post__meta { color: var(--kroa-tenue); font-size: .98rem; }
.kroa-post__thumbnail {
width: 100%;
max-width: 800px;
margin: var(--e4) 0;
border-radius: var(--kroa-radio-card);
overflow: hidden;
}
.kroa-post__thumbnail img { width: 100%; height: auto; display: block; }
.kroa-post__content {
max-width: var(--kroa-ancho-texto);
font-size: 1.0625rem;
line-height: 1.72;
color: var(--kroa-carbon);
}
a {
color: var(--kroa-verde-hondo);
text-underline-offset: .18em;
text-decoration-thickness: 1px;
transition: color var(--kroa-transicion);
}
a:hover { color: var(--kroa-terracota); }
::selection { background: var(--kroa-arena); color: var(--kroa-grafito); }
:where(a, button, input, select, textarea, .wp-block-button__link):focus-visible {
outline: 2px solid var(--kroa-oliva);
outline-offset: 3px;
border-radius: 2px;
}
/* Antetítulo / kicker editorial */
.kroa-kicker {
font-family: var(--kroa-sans);
font-size: .74rem;
font-weight: 600;
letter-spacing: .19em;
text-transform: uppercase;
color: var(--kroa-terracota);
margin-bottom: .9rem;
display: block;
}
.kroa-lead {
font-size: clamp(1.06rem, 1rem + .35vw, 1.28rem);
line-height: 1.62;
color: var(--kroa-carbon);
max-width: 62ch;
}
/* Filete decorativo bajo los títulos de sección */
.kroa-section-title { position: relative; margin-bottom: .55rem; }
.kroa-section-title::after {
content: "";
display: block;
width: 54px;
height: 2px;
margin-top: 1.15rem;
background: var(--kroa-terracota);
}
.has-text-align-center .kroa-section-title::after,
.kroa-section-title.has-text-align-center::after { margin-inline: auto; }
/* ═══════════════════════════════════════════════════════════════
3 · BOTONES
═══════════════════════════════════════════════════════════════ */
.wp-block-button__link,
.button,
button.button,
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
font-family: var(--kroa-sans);
font-weight: 600;
font-size: .93rem;
letter-spacing: .015em;
line-height: 1.2;
padding: .95em 1.9em;
border-radius: var(--kroa-radio);
border: 1px solid transparent;
transition: background-color var(--kroa-transicion),
border-color var(--kroa-transicion),
color var(--kroa-transicion),
transform var(--kroa-transicion),
box-shadow var(--kroa-transicion);
text-decoration: none;
}
.wp-block-button__link:hover,
.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce a.button.alt:hover {
transform: translateY(-1px);
box-shadow: var(--kroa-sombra);
}
/* Primario — verde profundo */
.wp-block-button.is-style-fill .wp-block-button__link,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
background-color: var(--kroa-verde-hondo);
color: #fff;
}
.wp-block-button.is-style-fill .wp-block-button__link:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover { background-color: var(--kroa-verde-hondo-h); color: #fff; }
/* Contorno — sobre fondos claros */
.wp-block-button.is-style-outline .wp-block-button__link {
background: transparent;
border-color: var(--kroa-arena-honda);
color: var(--kroa-grafito);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
border-color: var(--kroa-oliva);
background: var(--kroa-oliva-tenue);
color: var(--kroa-verde-hondo);
}
/* Contorno claro — sobre el hero oscuro */
.kroa-btn-ghost .wp-block-button__link {
background: rgba(253, 251, 247, .07);
border-color: rgba(253, 251, 247, .55);
color: #fff;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.kroa-btn-ghost .wp-block-button__link:hover {
background: rgba(253, 251, 247, .95);
border-color: transparent;
color: var(--kroa-grafito);
}
/* WhatsApp.
`a.kroa-wa` lo emite el shortcode [kroa_wa] dentro del contenido, donde no
hereda las reglas de `.button` ni `.wp-block-button__link`: sin forma propia
se veía como un enlace con fondo verde, no como un botón. */
.kroa-btn-wa .wp-block-button__link,
a.kroa-wa {
background-color: var(--kroa-verde-hondo);
color: #fff;
font-family: var(--kroa-sans);
font-weight: 600;
font-size: .93rem;
line-height: 1.2;
display: inline-flex;
align-items: center;
gap: .6em;
padding: .95em 1.65em;
border-radius: 999px;
text-decoration: none;
box-shadow: 0 10px 24px -14px rgba(46, 68, 50, .9);
transition: background-color var(--kroa-transicion),
transform var(--kroa-transicion);
}
.kroa-btn-wa .wp-block-button__link:hover,
a.kroa-wa:hover {
background-color: var(--kroa-rana-honda);
color: #fff;
transform: translateY(-2px);
}
.kroa-btn-wa .wp-block-button__link::before,
a.kroa-wa::before {
content: "";
width: 1.15em;
height: 1.15em;
flex: 0 0 auto;
background-color: currentColor;
-webkit-mask: var(--kroa-wa-icon) center / contain no-repeat;
mask: var(--kroa-wa-icon) center / contain no-repeat;
}
:root {
--kroa-wa-icon: url('data:image/svg+xml;utf8,');
}
/* ═══════════════════════════════════════════════════════════════
4 · CABECERA Y NAVEGACIÓN
═══════════════════════════════════════════════════════════════ */
#main-header,
.site-header-wrap {
background-color: rgba(253, 251, 247, .92);
backdrop-filter: saturate(140%) blur(10px);
-webkit-backdrop-filter: saturate(140%) blur(10px);
border-bottom: 1px solid var(--kroa-borde);
}
.header-navigation .header-menu-container > ul > li > a,
.main-navigation .primary-menu-container > ul > li > a {
font-family: var(--kroa-sans);
font-size: .93rem;
font-weight: 500;
letter-spacing: .01em;
color: var(--kroa-grafito);
}
.header-navigation ul li.current-menu-item > a,
.header-navigation ul li > a:hover { color: var(--kroa-oliva); }
/* Subrayado sobrio en el ítem activo */
.header-navigation .header-menu-container > ul > li > a { position: relative; }
.header-navigation .header-menu-container > ul > li > a::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: .35em;
height: 1px;
background: var(--kroa-terracota);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--kroa-transicion);
}
.header-navigation .header-menu-container > ul > li:hover > a::after,
.header-navigation .header-menu-container > ul > li.current-menu-item > a::after { transform: scaleX(1); }
/* Con logo, el nombre en texto al lado sobra: el logo ya dice "KROA TOUR
OPERADOR". Se mantiene accesible para lectores de pantalla. */
.site-branding:has(.custom-logo) .site-title,
.site-branding:has(img) .site-title {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.site-branding .site-title { font-family: var(--kroa-serif); letter-spacing: .01em; }
/* Logo: la marca es apaisada y muy ancha, así que se acota por altura —no por
ancho— para que no domine la cabecera ni se aplaste al reducirla. */
.site-header-row .site-branding img,
.site-branding .custom-logo {
height: clamp(38px, 4.4vw, 54px);
width: auto;
max-width: none;
transition: height var(--kroa-transicion);
}
/* Kadence reserva un espacio de "cabecera de entrada" antes del contenido y
mete el contenido en una caja centrada. En las páginas de Kroa el hero o la
cabecera editorial ya hacen ese trabajo y las secciones van a sangre, así
que eso dejaba una franja beige muerta bajo el menú y recuadros blancos a
los lados. `.kroa-pagina-completa` la pone functions.php en las páginas que
traen su propio ; el blog y las páginas de WooCommerce conservan el
comportamiento normal del tema. */
.home .entry-hero-container-inner,
.home .page-hero-section,
.home .entry-header,
.kroa-pagina-completa .entry-hero-container-inner,
.kroa-pagina-completa .page-hero-section,
.kroa-pagina-completa .entry-header { display: none; }
.home .content-area,
.home .site-main,
.home .entry-content-wrap,
.kroa-pagina-completa .content-area,
.kroa-pagina-completa .site-main,
.kroa-pagina-completa .entry-content-wrap { padding-block: 0; margin-block: 0; }
.home .content-container.site-container,
.home .content-area,
.kroa-pagina-completa .content-container.site-container,
.kroa-pagina-completa .content-area { max-width: none; padding-inline: 0; }
/* La "caja" de contenido de Kadence (fondo y sombra propios) compite con las
secciones a sangre: se neutraliza sólo en estas páginas. */
.kroa-pagina-completa .content-bg,
.kroa-pagina-completa article.entry {
background: transparent;
box-shadow: none;
padding: 0;
border: 0;
}
/* ═══════════════════════════════════════════════════════════════
5 · HERO
═══════════════════════════════════════════════════════════════ */
/* Composición a dos columnas, no imagen de fondo con texto encima.
*
* Las piezas gráficas de Kroa son pósters completos: ya llevan titular,
* tagline, logo y botón impresos en el pixel. Superponerles el texto del
* sitio producía dos titulares, dos CTA y dos logos peleando por el mismo
* espacio. Aquí el póster se muestra ENTERO —sin recortar y sin nada
* encima— y el texto del sitio vive en su propia columna. */
.kroa-hero {
position: relative;
background-color: var(--kroa-blanco-calido);
overflow: hidden;
isolation: isolate;
}
/* Mancha de color que ata el hero con el resto de la página sin competir
con el póster. */
.kroa-hero::before {
content: "";
position: absolute;
z-index: 0;
inset: 0 0 auto auto;
width: min(58%, 780px);
aspect-ratio: 1;
background: radial-gradient(circle at 70% 30%, var(--kroa-hueso), transparent 68%);
pointer-events: none;
}
.kroa-hero__inner {
position: relative;
z-index: 1;
display: grid;
gap: clamp(2rem, 5vw, 4.5rem);
align-items: center;
max-width: var(--kroa-ancho);
margin-inline: auto;
padding: var(--e6) var(--kroa-canal) var(--e7);
}
@media (min-width: 900px) {
.kroa-hero__inner {
/* El póster pesa más que el texto: se le da la columna mayor para que
sea el elemento dominante del primer pliegue. */
grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
padding-block: var(--e6) var(--e6);
}
}
/* — Columna de texto — */
.kroa-hero__texto { min-width: 0; }
.kroa-hero h1 {
color: var(--kroa-grafito);
font-weight: 500;
font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.4rem);
line-height: 1.04;
letter-spacing: -.025em;
margin: 0 0 var(--e3);
max-width: 14ch;
}
/* El acento va en una sola palabra: el resto del titular queda en grafito
para que el verde de marca tenga dónde destacar. */
.kroa-hero h1 em {
font-style: italic;
color: var(--kroa-oliva);
position: relative;
white-space: nowrap;
}
.kroa-hero__bajada {
font-size: clamp(1.04rem, .98rem + .36vw, 1.2rem);
line-height: 1.62;
color: var(--kroa-carbon);
max-width: 46ch;
margin: 0 0 var(--e4);
}
.kroa-hero__acciones {
display: flex;
flex-wrap: wrap;
gap: var(--e2);
align-items: center;
}
/* — Póster, entero y sin nada encima — */
.kroa-hero__arte {
position: relative;
margin: 0;
min-width: 0;
}
.kroa-hero__arte img {
display: block;
width: 100%;
height: auto; /* sin recorte: la composición se ve completa */
border-radius: var(--kroa-radio-card);
box-shadow: var(--kroa-sombra-alta);
}
/* En móvil el póster va primero: es el gancho visual de una marca de viajes. */
@media (max-width: 899px) {
.kroa-hero__arte { order: -1; }
.kroa-hero h1 { max-width: 18ch; }
.kroa-hero__inner { padding-block: var(--e4) var(--e5); }
/* El acento puede partir de línea si no cabe: mantenerlo en una sola
línea a toda costa era lo que empujaba el titular fuera de la pantalla. */
.kroa-hero h1 em { white-space: normal; }
}
@media (max-width: 420px) {
.kroa-hero h1 { font-size: clamp(2rem, 8.5vw, 2.5rem); }
}
/* — Destinos sugeridos — */
.kroa-hero-destinos {
display: flex;
flex-wrap: wrap;
gap: var(--e1) var(--e3);
align-items: baseline;
margin-top: var(--e4);
padding-top: var(--e3);
border-top: 1px solid var(--kroa-borde);
}
.kroa-hero-destinos > span {
font-size: .7rem;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--kroa-tenue);
width: 100%;
}
.kroa-hero-destinos a {
font-family: var(--kroa-serif);
font-size: 1.15rem;
color: var(--kroa-grafito);
text-decoration: none;
border-bottom: 1px solid var(--kroa-arena-honda);
padding-bottom: 2px;
transition: color var(--kroa-transicion), border-color var(--kroa-transicion);
}
.kroa-hero-destinos a:hover {
color: var(--kroa-rana-honda);
border-bottom-color: var(--kroa-rana);
}
/* ═══════════════════════════════════════════════════════════════
6 · SECCIONES
═══════════════════════════════════════════════════════════════ */
/* Ritmo: tres densidades en vez de un mismo padding enorme en todas las
secciones. Con un único valor grande la página no respiraba, se leía como
una sucesión de huecos del mismo tamaño. */
.kroa-section { padding-block: var(--e6); }
.kroa-section--densa { padding-block: var(--e5); }
.kroa-section--amplia { padding-block: var(--e7); }
/* Cada sección trae su propio canal lateral en vez de heredarlo del
contenedor de Kadence (que la portada anula para que el hero llegue a los
bordes). Sin esto el contenido quedaba pegado al filo en móvil. */
.kroa-section { padding-inline: var(--kroa-canal); }
/* Gutenberg compensa el `alignfull` con márgenes negativos del tamaño del
padding raíz. Como aquí ese padding ya está anulado, esos márgenes sólo
conseguían sacar la sección 4 px por cada lado: en móvil recortaba las
cifras de "Por qué Kroa" contra el borde izquierdo. */
body .kroa-section.alignfull {
margin-left: 0;
margin-right: 0;
width: 100%;
max-width: 100%;
}
/* Y su contenido se centra al mismo ancho que el resto del sitio. */
body .kroa-section > * {
max-width: var(--kroa-ancho);
margin-inline: auto;
}
.kroa-section--hueso { background-color: var(--kroa-hueso); }
.kroa-section--arena { background-color: var(--kroa-arena); }
.kroa-section--oscuro {
background-color: var(--kroa-verde-hondo);
color: rgba(255, 255, 255, .82);
}
.kroa-section--oscuro h1,
.kroa-section--oscuro h2,
.kroa-section--oscuro h3 { color: #fff; }
.kroa-section--oscuro .kroa-kicker { color: var(--kroa-cobre); }
.kroa-section--oscuro .kroa-section-title::after { background: var(--kroa-cobre); }
/* `.kroa-lead` fija su propio color oscuro, así que no hereda el claro de la
sección: sobre el verde profundo el párrafo quedaba prácticamente ilegible.
Lo mismo vale para cualquier párrafo con color explícito dentro. */
.kroa-section--oscuro .kroa-lead,
.kroa-section--oscuro p { color: rgba(255, 255, 255, .78); }
.kroa-section--oscuro a:not(.kroa-boton):not(.wp-block-button__link) { color: #fff; }
.kroa-section__head { max-width: 720px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.kroa-section__head.is-centered { margin-inline: auto; text-align: center; }
/* WordPress aplica a los hijos de un contenedor "constrained" la regla
`body .is-layout-constrained > :where(...)` con `margin-inline: auto`, que
gana en especificidad a un simple `.kroa-section__head > *`. Por eso la
bajada aparecía desplazada al centro mientras el antetítulo y el titular
quedaban a la izquierda: la cabecera se leía escalonada. Se iguala la
especificidad anteponiendo `body`. */
body .kroa-section__head > * {
margin-inline: 0;
max-width: none;
}
body .kroa-section__head .kroa-lead { max-width: 56ch; }
body .kroa-section__head.is-centered > * { margin-inline: auto; }
/* ═══════════════════════════════════════════════════════════════
7 · TARJETAS DE DESTINO
═══════════════════════════════════════════════════════════════ */
/* Rejilla que se adapta al número real de tarjetas.
*
* La versión anterior fijaba 4 columnas con la primera ocupando 2×2, dando
* por hecho que siempre habría exactamente 5 destinos. Al migrar el catálogo
* el número cambió y la retícula quedó con celdas huérfanas. `auto-fit` con
* un mínimo hace que cierre sola con 2, 3, 5 o 6 tarjetas. */
.kroa-destinos {
display: grid;
gap: clamp(1rem, 2vw, 1.75rem);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.kroa-destino {
display: flex;
flex-direction: column;
text-decoration: none;
border-radius: var(--kroa-radio-card);
overflow: hidden;
background: var(--kroa-blanco-calido);
border: 1px solid var(--kroa-borde);
transition: border-color var(--kroa-transicion),
box-shadow var(--kroa-transicion),
transform var(--kroa-transicion);
}
.kroa-destino:hover {
border-color: transparent;
box-shadow: var(--kroa-sombra-alta);
transform: translateY(-3px);
}
/* Marco del póster: proporción fija para que la rejilla no baile, pero el
recorte se hace sobre la imagen ya preparada en 4:5. */
.kroa-destino__marco {
display: block;
position: relative;
aspect-ratio: 4 / 5;
overflow: hidden;
background: var(--kroa-arena);
}
.kroa-destino__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 640ms cubic-bezier(.22, .61, .36, 1);
}
.kroa-destino:hover .kroa-destino__img { transform: scale(1.04); }
/* Respaldo cuando la categoría no tiene imagen: inicial sobre color de marca.
Se lee como una decisión de diseño, no como una imagen que falta. */
.kroa-destino__sinfoto {
position: absolute;
inset: 0;
display: grid;
place-items: center;
font-family: var(--kroa-serif);
font-size: clamp(3.5rem, 8vw, 6rem);
color: var(--kroa-arena-honda);
background: linear-gradient(155deg, var(--kroa-hueso), var(--kroa-arena));
}
/* El pie va debajo de la imagen: los pósters ya traen su propio texto
impreso y superponerle más lo volvía ilegible. */
.kroa-destino__pie {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--e2);
padding: var(--e3);
background: var(--kroa-blanco-calido);
transition: background-color var(--kroa-transicion);
}
.kroa-destino:hover .kroa-destino__pie { background: var(--kroa-oliva-tenue); }
.kroa-destino__nombre {
font-family: var(--kroa-serif);
font-size: 1.22rem;
font-weight: 500;
line-height: 1.2;
color: var(--kroa-grafito);
}
.kroa-destino__meta {
flex: 0 0 auto;
font-size: .82rem;
color: var(--kroa-tenue);
letter-spacing: .02em;
}
.kroa-destino:hover .kroa-destino__meta { color: var(--kroa-rana-honda); }
/* ═══════════════════════════════════════════════════════════════
7 ter · CONTENEDOR Y BOTONES
═══════════════════════════════════════════════════════════════ */
/* Un solo contenedor para todo el sitio. El desalineado entre antetítulo,
titular, bajada y tarjetas venía de que cada bloque traía su propio ancho:
el ojo lo leía como "mal centrado". */
.kroa-contenedor {
width: 100%;
max-width: var(--kroa-ancho);
margin-inline: auto;
padding-inline: var(--kroa-canal);
}
.kroa-boton {
display: inline-flex;
align-items: center;
gap: .55em;
padding: .95em 1.65em;
border-radius: 999px;
border: 1px solid transparent;
font-family: var(--kroa-sans);
font-size: .93rem;
font-weight: 600;
line-height: 1.2;
text-decoration: none;
cursor: pointer;
transition: background-color var(--kroa-transicion),
border-color var(--kroa-transicion),
color var(--kroa-transicion),
transform var(--kroa-transicion),
box-shadow var(--kroa-transicion);
}
.kroa-boton:hover { transform: translateY(-2px); }
.kroa-boton--wa {
background: var(--kroa-verde-hondo);
color: #fff;
box-shadow: 0 10px 24px -14px rgba(46, 68, 50, .9);
}
.kroa-boton--wa:hover { background: var(--kroa-rana-honda); color: #fff; }
.kroa-boton--wa::before {
content: "";
width: 1.15em; height: 1.15em;
flex: 0 0 auto;
background-color: currentColor;
-webkit-mask: var(--kroa-wa-icon) center / contain no-repeat;
mask: var(--kroa-wa-icon) center / contain no-repeat;
}
.kroa-boton--linea {
background: transparent;
border-color: var(--kroa-arena-honda);
color: var(--kroa-grafito);
}
.kroa-boton--linea:hover {
border-color: var(--kroa-rana);
background: var(--kroa-oliva-tenue);
color: var(--kroa-rana-honda);
}
/* ═══════════════════════════════════════════════════════════════
7 quater · MOVIMIENTO Y SELLO DE MARCA
═══════════════════════════════════════════════════════════════ */
/* Revelado al entrar en pantalla. El escalonado lo pone el JS con un
transition-delay por posición, para que las filas entren en cascada.
*
* Va condicionado a `html:not(.no-js)` —Kadence quita `no-js` en cuanto
* arranca el script— para que sin JavaScript el contenido se vea igual.
* Ocultar con `opacity: 0` y depender de JS para mostrarlo dejaría la
* portada en blanco si el script falla. */
html:not(.no-js) .kroa-reveal,
html:not(.no-js) .kroa-razon,
html:not(.no-js) .kroa-testimonio,
html:not(.no-js) .kroa-cifra {
opacity: 0;
transform: translateY(18px);
transition: opacity 620ms cubic-bezier(.22, .61, .36, 1),
transform 620ms cubic-bezier(.22, .61, .36, 1);
}
html:not(.no-js) .kroa-reveal.is-visible,
html:not(.no-js) .kroa-razon.is-visible,
html:not(.no-js) .kroa-testimonio.is-visible,
html:not(.no-js) .kroa-cifra.is-visible { opacity: 1; transform: none; }
/* Cabecera: limpia sobre el hero, sólida en cuanto se baja. */
#masthead,
.site-header {
position: sticky;
top: 0;
z-index: 500;
transition: box-shadow var(--kroa-transicion), background-color var(--kroa-transicion);
}
.kroa-header--scrolled { box-shadow: 0 1px 0 var(--kroa-borde), 0 10px 30px -22px rgba(42, 42, 40, .5); }
.kroa-header--scrolled .site-branding img,
.kroa-header--scrolled .custom-logo { height: clamp(32px, 3.4vw, 42px); }
/* — La rana —
*
* Es el activo de marca que ningún competidor tiene: una rana de ojos rojos
* en el logo de una operadora de viajes. Se usa como sello recurrente, no
* como adorno suelto: marca los títulos de sección y las listas de "incluye".
* El SVG va embebido para no añadir peticiones. */
:root {
--kroa-rana-svg: url('data:image/svg+xml;utf8,');
}
/* Sello bajo los títulos de sección: sustituye a la raya genérica. */
.kroa-section-title::after {
content: "";
display: block;
width: 46px;
height: 2px;
margin-top: 1.1rem;
background: var(--kroa-rana);
border-radius: 2px;
}
.kroa-section--oscuro .kroa-section-title::after { background: var(--kroa-rana-viva); }
/* Viñetas de "qué incluye": la rana en lugar de un punto cualquiera. */
.kroa-incluye--si li {
position: relative;
padding-left: 1.9rem;
}
.kroa-incluye--si li::before {
content: "";
position: absolute;
left: 0;
top: .85em;
width: 1.15rem;
height: 1.15rem;
transform: translateY(-50%);
background: var(--kroa-rana-svg) center / contain no-repeat;
}
@media (prefers-reduced-motion: reduce) {
.kroa-destino,
.kroa-destino__img,
.kroa-boton { transition: none; animation: none; }
.kroa-destino:hover,
.kroa-boton:hover { transform: none; }
/* Misma especificidad que la regla que los oculta (`html:not(.no-js)
.kroa-reveal`): con un simple `.kroa-reveal` esta regla perdía y quien
pedía menos movimiento se quedaba sin ver el contenido. */
html:not(.no-js) .kroa-reveal,
html:not(.no-js) .kroa-razon,
html:not(.no-js) .kroa-testimonio,
html:not(.no-js) .kroa-cifra {
opacity: 1;
transform: none;
transition: none;
}
}
/* ═══════════════════════════════════════════════════════════════
7 ter · VOCABULARIO DE MOVIMIENTO NUEVO
Piezas con propósito, no decoración suelta: entrada del hero, un
barrido de luz en el hover de tarjetas con imagen, y la rana saltando
al abrir "Qué incluye". Todo dentro de `no-preference`: el respeto a
`prefers-reduced-motion` queda garantizado por el propio media query,
sin pelear con la especificidad de otras reglas. */
@media (prefers-reduced-motion: no-preference) {
/* — Entrada orquestada del hero — */
html:not(.no-js) .kroa-hero:not(.is-ready) .kroa-hero__texto > *,
html:not(.no-js) .kroa-hero:not(.is-ready) .kroa-hero__arte { opacity: 0; }
html:not(.no-js) .kroa-hero.is-ready .kroa-hero__texto > * {
animation: kroa-hero-entra 720ms cubic-bezier(.22, .61, .36, 1) both;
}
html:not(.no-js) .kroa-hero.is-ready .kroa-hero__texto > *:nth-child(1) { animation-delay: .05s; }
html:not(.no-js) .kroa-hero.is-ready .kroa-hero__texto > *:nth-child(2) { animation-delay: .13s; }
html:not(.no-js) .kroa-hero.is-ready .kroa-hero__texto > *:nth-child(3) { animation-delay: .21s; }
html:not(.no-js) .kroa-hero.is-ready .kroa-hero__texto > *:nth-child(4) { animation-delay: .29s; }
html:not(.no-js) .kroa-hero.is-ready .kroa-hero__texto > *:nth-child(5) { animation-delay: .37s; }
html:not(.no-js) .kroa-hero.is-ready .kroa-hero__arte {
animation: kroa-hero-arte-entra 900ms cubic-bezier(.22, .61, .36, 1) .16s both;
}
@keyframes kroa-hero-entra {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: none; }
}
@keyframes kroa-hero-arte-entra {
from { opacity: 0; transform: scale(1.025) translateY(14px); }
to { opacity: 1; transform: none; }
}
/* — Barrido de luz en tarjetas con imagen — */
.kroa-destino__marco::after,
.kroa-salida__media::after,
.kroa-carrusel__marco::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(115deg, transparent 30%, rgba(253, 251, 247, .32) 48%, transparent 66%);
transform: translateX(-120%);
}
.kroa-destino:hover .kroa-destino__marco::after,
.kroa-salida:hover .kroa-salida__media::after,
.kroa-carrusel__tarjeta:hover .kroa-carrusel__marco::after {
animation: kroa-brillo 900ms cubic-bezier(.22, .61, .36, 1);
}
@keyframes kroa-brillo {
from { transform: translateX(-120%); }
to { transform: translateX(120%); }
}
/* — La rana salta al revelar "Qué incluye" — */
html:not(.no-js) .kroa-incluye--si.kroa-reveal.is-visible li::before {
animation: kroa-rana-salta 520ms cubic-bezier(.34, 1.56, .64, 1) both;
}
html:not(.no-js) .kroa-incluye--si.kroa-reveal.is-visible li:nth-child(1)::before { animation-delay: .08s; }
html:not(.no-js) .kroa-incluye--si.kroa-reveal.is-visible li:nth-child(2)::before { animation-delay: .14s; }
html:not(.no-js) .kroa-incluye--si.kroa-reveal.is-visible li:nth-child(3)::before { animation-delay: .20s; }
html:not(.no-js) .kroa-incluye--si.kroa-reveal.is-visible li:nth-child(4)::before { animation-delay: .26s; }
html:not(.no-js) .kroa-incluye--si.kroa-reveal.is-visible li:nth-child(n+5)::before { animation-delay: .32s; }
@keyframes kroa-rana-salta {
0% { transform: translateY(-50%) scale(0); opacity: 0; }
60% { transform: translateY(-50%) scale(1.25); opacity: 1; }
100% { transform: translateY(-50%) scale(1); opacity: 1; }
}
}
/* ═══════════════════════════════════════════════════════════════
7 bis · SALIDAS Y PROMOCIONES
Tarjeta sobria: es catálogo, no escaparate de e-commerce.
═══════════════════════════════════════════════════════════════ */
/* Tres columnas fijas en escritorio, no `auto-fit`: con las 6 salidas que
muestra la portada, el ajuste automático daba cuatro arriba y dos abajo,
con un hueco a la derecha. En 3×2 la retícula cierra completa. */
.kroa-salidas {
display: grid;
gap: clamp(1.25rem, 2.5vw, 2rem);
grid-template-columns: 1fr;
}
@media (min-width: 620px) { .kroa-salidas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .kroa-salidas { grid-template-columns: repeat(3, 1fr); } }
.kroa-salida {
display: flex;
flex-direction: column;
background: var(--kroa-blanco-calido);
border: 1px solid var(--kroa-borde);
border-radius: var(--kroa-radio-card);
overflow: hidden;
transition: box-shadow var(--kroa-transicion), border-color var(--kroa-transicion);
}
.kroa-salida:hover { box-shadow: var(--kroa-sombra); border-color: var(--kroa-arena-honda); }
/* 4:5 — coincide con el tamaño de imagen 'kroa-card' registrado en el tema,
para que WordPress recorte una sola vez y no dos en direcciones opuestas. */
.kroa-salida__media { display: block; position: relative; overflow: hidden; background: var(--kroa-arena); aspect-ratio: 4 / 5; }
.kroa-salida__media img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
transition: transform 600ms cubic-bezier(.22, .61, .36, 1);
}
.kroa-salida:hover .kroa-salida__media img { transform: scale(1.04); }
.kroa-salida__body { padding: 1.35rem 1.4rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.kroa-salida__cat {
font-size: .68rem;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--kroa-terracota);
margin-bottom: .6rem;
}
.kroa-salida__title {
font-family: var(--kroa-serif);
font-size: 1.16rem;
font-weight: 500;
line-height: 1.3;
margin: 0 0 .8rem;
}
.kroa-salida__title a { color: var(--kroa-grafito); text-decoration: none; }
.kroa-salida__title a:hover { color: var(--kroa-oliva); }
.kroa-salida__precio {
font-family: var(--kroa-serif);
font-size: 1.55rem;
font-weight: 600;
line-height: 1.1;
letter-spacing: -.01em;
color: var(--kroa-rana-honda);
margin-bottom: 1.2rem;
margin-top: auto;
}
.kroa-salida__precio::after {
content: "";
display: block;
width: 28px;
height: 2px;
margin-top: .5rem;
background: var(--kroa-rana);
border-radius: 2px;
}
.kroa-salida__precio .kroa-desde {
display: block;
font-family: var(--kroa-sans);
font-size: .68rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--kroa-tenue);
font-weight: 500;
}
.kroa-salida__precio del { font-family: var(--kroa-sans); font-size: .65em; font-weight: 400; color: var(--kroa-tenue); opacity: .7; margin-right: .4em; }
.kroa-salida__precio ins { text-decoration: none; color: inherit; }
.kroa-salida__cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .5em;
padding: .8em 1.2em;
border: 1px solid var(--kroa-arena-honda);
border-radius: var(--kroa-radio);
font-size: .87rem;
font-weight: 600;
color: var(--kroa-verde-hondo);
text-decoration: none;
transition: background-color var(--kroa-transicion), border-color var(--kroa-transicion), color var(--kroa-transicion);
}
.kroa-salida__cta::before {
content: "";
width: 1.1em; height: 1.1em;
background-color: currentColor;
-webkit-mask: var(--kroa-wa-icon) center / contain no-repeat;
mask: var(--kroa-wa-icon) center / contain no-repeat;
}
.kroa-salida__cta:hover {
background: var(--kroa-whatsapp);
border-color: var(--kroa-whatsapp);
color: #06331a;
}
/* Aviso que sólo ve quien edita */
.kroa-aviso-editor {
border: 1px dashed var(--kroa-cobre);
border-radius: var(--kroa-radio);
background: rgba(196, 133, 90, .07);
color: var(--kroa-terracota-alt);
padding: 1rem 1.2rem;
font-size: .9rem;
}
/* ═══════════════════════════════════════════════════════════════
8 · POR QUÉ KROA
═══════════════════════════════════════════════════════════════ */
.kroa-razones { display: grid; gap: 1px; background: var(--kroa-borde); border-block: 1px solid var(--kroa-borde); }
@media (min-width: 782px) { .kroa-razones { grid-template-columns: repeat(3, 1fr); } }
/* Con cuatro tarjetas, la retícula de tres deja una suelta y un hueco al lado.
En 2×2 la fila cierra completa y cada tarjeta gana ancho para su texto. */
@media (min-width: 782px) {
.kroa-razones--cuatro { grid-template-columns: repeat(2, 1fr); }
}
.kroa-razon {
background: var(--kroa-blanco-calido);
padding: clamp(1.8rem, 3vw, 2.6rem);
transition: background-color var(--kroa-transicion);
}
.kroa-razon:hover { background: #fff; }
.kroa-razon__num {
font-family: var(--kroa-serif);
font-size: .95rem;
color: var(--kroa-cobre);
display: block;
margin-bottom: 1.1rem;
letter-spacing: .08em;
}
/* Estas tarjetas van sobre fondo claro aunque la sección sea oscura, así que
recuperan el color de texto normal: heredar el blanco de
`.kroa-section--oscuro h3` las dejaba literalmente invisibles. */
.kroa-razon h3 {
font-size: 1.22rem;
margin: 0 0 .55rem;
color: var(--kroa-grafito);
}
.kroa-razon p { font-size: .96rem; color: var(--kroa-tenue); margin: 0; line-height: 1.65; }
/* Cifras */
.kroa-cifras {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: clamp(1.5rem, 4vw, 3.5rem);
margin-bottom: clamp(2.5rem, 5vw, 4rem);
text-align: center;
}
/* En la portada las cifras van seguidas de las razones y ese margen separa
ambos bloques. En Nosotros cierran la sección, y el margen se veía como una
franja oscura vacía bajo los números. */
.kroa-cifras:last-child { margin-bottom: 0; }
.kroa-cifra__valor {
font-family: var(--kroa-serif);
font-size: clamp(2.6rem, 1.9rem + 2.8vw, 4rem);
font-weight: 400;
line-height: 1;
color: var(--kroa-oliva);
display: block;
letter-spacing: -.02em;
}
.kroa-section--oscuro .kroa-cifra__valor { color: var(--kroa-cobre); }
.kroa-cifra__label {
display: block;
margin-top: .7rem;
font-size: .8rem;
letter-spacing: .13em;
text-transform: uppercase;
color: var(--kroa-tenue);
line-height: 1.5;
}
.kroa-section--oscuro .kroa-cifra__label { color: rgba(255, 255, 255, .62); }
/* ═══════════════════════════════════════════════════════════════
9 · TESTIMONIOS
═══════════════════════════════════════════════════════════════ */
.kroa-testimonios { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 900px) { .kroa-testimonios { grid-template-columns: repeat(3, 1fr); } }
.kroa-testimonio {
background: var(--kroa-blanco-calido);
border: 1px solid var(--kroa-borde);
border-radius: var(--kroa-radio-card);
padding: clamp(1.8rem, 3vw, 2.4rem);
display: flex;
flex-direction: column;
}
.kroa-testimonio__quote {
font-family: var(--kroa-serif);
font-size: 1.14rem;
line-height: 1.55;
color: var(--kroa-grafito);
font-style: italic;
margin: 0 0 1.6rem;
flex: 1;
}
.kroa-testimonio__quote::before { content: "\201C"; color: var(--kroa-cobre); margin-right: .06em; }
.kroa-testimonio__quote::after { content: "\201D"; color: var(--kroa-cobre); }
.kroa-testimonio__autor { font-size: .92rem; font-weight: 600; color: var(--kroa-grafito); margin: 0; }
.kroa-testimonio__viaje { font-size: .82rem; color: var(--kroa-tenue); margin: .15rem 0 0; }
/* Tercera tarjeta: invita a dejar una reseña real en vez de mostrar un
testimonio inventado — borde punteado la distingue de las 2 reales. */
.kroa-testimonio--cta {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
text-decoration: none;
border-style: dashed;
transition: border-color var(--kroa-transicion), background var(--kroa-transicion);
}
.kroa-testimonio--cta:hover { border-color: var(--kroa-rana); background: var(--kroa-oliva-tenue); }
.kroa-testimonio--cta__estrellas { color: var(--kroa-rana); letter-spacing: .1em; margin-bottom: .6rem; font-size: 1.1rem; }
.kroa-testimonio--cta__texto { font-family: var(--kroa-serif); font-size: 1.14rem; font-style: italic; color: var(--kroa-carbon); line-height: 1.5; margin: 0 0 1.2rem; }
.kroa-testimonio--cta__enlace { font-family: var(--kroa-sans); font-size: .88rem; font-weight: 600; color: var(--kroa-verde-hondo); }
/* ═══════════════════════════════════════════════════════════════
10 · CTA FINAL
═══════════════════════════════════════════════════════════════ */
.kroa-cta-final { position: relative; overflow: hidden; }
.kroa-cta-final::after {
content: "";
position: absolute;
right: -12%; top: -35%;
width: 60vmax; height: 60vmax;
border-radius: 50%;
background: radial-gradient(circle at 50% 50%, rgba(196, 133, 90, .16), transparent 62%);
pointer-events: none;
}
.kroa-cta-final > * { position: relative; z-index: 1; }
/* Todo el bloque centrado: kicker, título, bajada, botón y canales en una
sola columna vertical, en vez del layout anclado a la izquierda de antes. */
.kroa-cta-final { text-align: center; }
.kroa-cta-final .kroa-kicker,
.kroa-cta-final .kroa-lead {
margin-inline: auto;
}
.kroa-cta-final h2 {
max-width: 24ch;
margin-inline: auto;
}
.kroa-cta-final .wp-block-buttons { justify-content: center; }
.kroa-cta-canales {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1.5rem 2.5rem;
margin-top: 2.5rem;
padding-top: 2rem;
border-top: 1px solid rgba(255, 255, 255, .16);
}
.kroa-cta-canal__label {
display: block;
font-size: .7rem;
letter-spacing: .18em;
text-transform: uppercase;
color: rgba(255, 255, 255, .5);
margin-bottom: .3rem;
}
.kroa-cta-canal a { color: #fff; text-decoration: none; font-size: 1.02rem; border-bottom: 1px solid rgba(255,255,255,.28); }
.kroa-cta-canal a:hover { border-bottom-color: var(--kroa-cobre); color: var(--kroa-arena); }
/* ═══════════════════════════════════════════════════════════════
11 · FOOTER
═══════════════════════════════════════════════════════════════ */
#colophon, .site-footer {
background-color: var(--kroa-grafito);
color: rgba(255, 255, 255, .66);
font-size: .93rem;
}
#colophon a, .site-footer a { color: rgba(255, 255, 255, .8); text-decoration: none; }
#colophon a:hover, .site-footer a:hover { color: var(--kroa-rana); }
.kroa-pie__principal { padding-block: clamp(3rem, 6vw, 5rem); }
.kroa-pie__rejilla {
display: grid;
gap: clamp(2rem, 4vw, 3.5rem);
grid-template-columns: 1fr;
}
@media (min-width: 640px) { .kroa-pie__rejilla { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .kroa-pie__rejilla { grid-template-columns: 1.4fr 1.2fr 1fr .9fr; } }
.kroa-pie__logo,
.kroa-pie__marca .custom-logo-link { display: inline-block; max-width: 200px; }
.kroa-pie__logo img,
.kroa-pie__marca .custom-logo { width: 100%; height: auto; display: block; }
.kroa-pie__nombre {
font-family: var(--kroa-serif);
font-size: 1.5rem;
color: #fff;
}
.kroa-pie__lema {
margin: 1.1rem 0 1.4rem;
font-size: .92rem;
line-height: 1.65;
color: rgba(255, 255, 255, .58);
max-width: 34ch;
}
.kroa-pie__wa {
display: inline-flex;
align-items: center;
gap: .55em;
font-weight: 600;
font-size: 1rem;
color: #fff !important;
}
.kroa-pie__wa::before {
content: "";
width: 1.15em;
height: 1.15em;
background-color: var(--kroa-whatsapp);
-webkit-mask: var(--kroa-wa-icon) center / contain no-repeat;
mask: var(--kroa-wa-icon) center / contain no-repeat;
}
#colophon .kroa-pie__titulo,
.site-footer .kroa-pie__titulo,
#colophon .widget-title {
font-family: var(--kroa-sans);
font-size: .72rem;
font-weight: 600;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--kroa-rana);
margin: 0 0 1.2rem;
}
.kroa-pie__lista { list-style: none; margin: 0; padding: 0; }
.kroa-pie__lista li { margin-bottom: .6rem; }
.kroa-pie__lista a { font-size: .93rem; }
/* ── Sucursales ──────────────────────────────────────────────
El componente hereda el color del contexto en lugar de fijarlo:
antes forzaba blanco y quedaba invisible al reutilizarlo en la
página de Contacto, que va sobre fondo claro. */
.kroa-sucursal { margin-bottom: 1.3rem; line-height: 1.6; }
.kroa-sucursal:last-child { margin-bottom: 0; }
.kroa-sucursal strong {
display: block;
font-weight: 600;
font-size: .9rem;
margin-bottom: .15rem;
color: var(--kroa-grafito);
}
.kroa-sucursal span {
display: block;
font-size: .86rem;
color: var(--kroa-tenue);
}
/* Sobre fondos oscuros (pie y secciones oscuras) sí se aclara. */
#colophon .kroa-sucursal strong,
.site-footer .kroa-sucursal strong,
.kroa-section--oscuro .kroa-sucursal strong { color: #fff; }
#colophon .kroa-sucursal span,
.site-footer .kroa-sucursal span,
.kroa-section--oscuro .kroa-sucursal span { color: rgba(255, 255, 255, .55); }
.kroa-social { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.4rem; }
.kroa-social a {
font-size: .88rem;
border-bottom: 1px solid currentColor;
padding-bottom: 1px;
opacity: .75;
transition: opacity var(--kroa-transicion);
}
.kroa-social a:hover { opacity: 1; }
.kroa-pie__legal {
border-top: 1px solid rgba(255, 255, 255, .1);
padding-block: 1.5rem;
}
.kroa-pie__legal-interior {
display: flex;
flex-wrap: wrap;
gap: .5rem 2rem;
justify-content: space-between;
align-items: baseline;
}
.kroa-pie__legal p {
margin: 0;
font-size: .8rem;
color: rgba(255, 255, 255, .42);
}
.kroa-pie__credenciales { letter-spacing: .04em; }
/* Clase heredada del contenido antiguo del pie. */
.kroa-legal {
border-top: 1px solid rgba(255, 255, 255, .1);
margin-top: 2.5rem;
padding-top: 1.6rem;
font-size: .8rem;
color: rgba(255, 255, 255, .42);
}
/* ═══════════════════════════════════════════════════════════════
12 · BOTÓN FLOTANTE WHATSAPP
Respaldo por si Click to Chat estuviera desactivado.
═══════════════════════════════════════════════════════════════ */
.kroa-wa-float {
position: fixed;
right: clamp(1rem, 3vw, 1.75rem);
bottom: clamp(1rem, 3vw, 1.75rem);
z-index: 9990;
display: inline-flex;
align-items: center;
gap: .6em;
padding: .85em 1.35em;
border-radius: 999px;
background: var(--kroa-whatsapp);
color: #06331a;
font-family: var(--kroa-sans);
font-weight: 600;
font-size: .92rem;
text-decoration: none;
box-shadow: 0 6px 24px -6px rgba(37, 211, 102, .55), 0 2px 6px rgba(0,0,0,.14);
transition: transform var(--kroa-transicion), box-shadow var(--kroa-transicion);
}
.kroa-wa-float:hover { transform: translateY(-2px); color: #06331a; }
.kroa-wa-float::before {
content: "";
width: 1.3em; height: 1.3em;
background-color: currentColor;
-webkit-mask: var(--kroa-wa-icon) center / contain no-repeat;
mask: var(--kroa-wa-icon) center / contain no-repeat;
}
@media (max-width: 600px) {
.kroa-wa-float__texto { display: none; }
.kroa-wa-float { padding: .95em; border-radius: 50%; }
}
/* Si Click to Chat está activo, ocultamos el respaldo */
body.kroa-has-ctc .kroa-wa-float { display: none; }
/* — Canales alternativos de contacto — */
.kroa-contacto-canales { display: grid; gap: 1.25rem; align-content: start; }
.kroa-canal {
border: 1px solid var(--kroa-borde);
border-radius: var(--kroa-radio-card);
background: var(--kroa-blanco-calido);
padding: 1.4rem 1.5rem;
}
.kroa-canal__etiqueta {
display: block;
font-size: .68rem;
font-weight: 600;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--kroa-terracota);
margin-bottom: .5rem;
}
.kroa-canal p {
margin: 0 0 1.1rem;
font-size: .94rem;
color: var(--kroa-tenue);
line-height: 1.55;
}
/* ═══════════════════════════════════════════════════════════════
12 · SUCURSALES CON MAPA (página de contacto)
Filas alternas para que tres sedes no se lean como una lista
repetida: la vista cambia de lado en cada una.
═══════════════════════════════════════════════════════════════ */
.kroa-sedes { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
.kroa-sede {
display: grid;
gap: clamp(1.5rem, 3vw, 2.5rem);
align-items: center;
grid-template-columns: 1fr;
}
@media (min-width: 880px) {
.kroa-sede { grid-template-columns: 1.6fr .4fr; }
/* Limita el ancho visual del mapa en pantallas grandes de forma proporcional */
.kroa-sede__mapa {
max-width: clamp(300px, 30vw, 420px);
justify-self: end;
}
/* En las pares se invierte el orden visual sin tocar el del documento,
así el lector de pantalla sigue oyendo mapa → datos en todas. */
.kroa-sede:nth-child(even) .kroa-sede__mapa { order: 2; }
.kroa-sede:nth-child(even) .kroa-sede__datos { order: 1; }
}
.kroa-sede__mapa {
position: relative;
/* Columna del mapa más estrecha en Contacto y aspecto algo más apaisado */
aspect-ratio: 16 / 9;
border-radius: var(--kroa-radio-card);
overflow: hidden;
border: 1px solid var(--kroa-borde);
background: var(--kroa-arena);
box-shadow: var(--kroa-sombra);
}
.kroa-sede__mapa iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
/* El mapa llega algo más saturado que la paleta cálida del sitio: se baja
un punto para que acompañe al contenido en vez de competir con él. */
filter: saturate(.82) contrast(.96);
}
.kroa-sede__indice {
display: block;
font-family: var(--kroa-serif);
font-size: .95rem;
letter-spacing: .1em;
color: var(--kroa-cobre);
margin-bottom: .6rem;
}
.kroa-sede__nombre {
font-family: var(--kroa-serif);
font-size: clamp(1.4rem, 1.2rem + .9vw, 1.9rem);
font-weight: 500;
line-height: 1.15;
margin: 0 0 .7rem;
color: var(--kroa-grafito);
}
.kroa-sede__direccion {
margin: 0 0 1.4rem;
color: var(--kroa-carbon);
font-size: .98rem;
line-height: 1.6;
max-width: 42ch;
}
.kroa-sede__lista {
margin: 0 0 1.6rem;
padding: 0;
border-top: 1px solid var(--kroa-borde);
}
.kroa-sede__lista dt {
font-size: .68rem;
font-weight: 600;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--kroa-tenue);
padding-top: .9rem;
}
.kroa-sede__lista dd {
margin: .2rem 0 0;
padding-bottom: .9rem;
border-bottom: 1px solid var(--kroa-borde);
font-size: .96rem;
color: var(--kroa-grafito);
}
.kroa-sede__acciones {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1rem 1.5rem;
}
.kroa-sede__ruta {
display: inline-flex;
align-items: center;
gap: .4em;
font-size: .9rem;
font-weight: 600;
color: var(--kroa-verde-hondo);
text-decoration: none;
border-bottom: 1px solid var(--kroa-arena-honda);
padding-bottom: 2px;
transition: color var(--kroa-transicion), border-color var(--kroa-transicion);
}
.kroa-sede__ruta::after { content: "↗"; font-size: .9em; }
.kroa-sede__ruta:hover { color: var(--kroa-terracota); border-bottom-color: var(--kroa-terracota); }
/* ═══════════════════════════════════════════════════════════════
12 bis · CATÁLOGO: cabecera, carrusel, filtros y buscador
═══════════════════════════════════════════════════════════════ */
.kroa-catalogo-cabecera {
background: var(--kroa-hueso);
padding-block: clamp(2.5rem, 5vw, 4.5rem);
margin-bottom: clamp(2rem, 4vw, 3rem);
}
.kroa-catalogo-cabecera__titulo {
font-family: var(--kroa-serif);
font-size: clamp(2.2rem, 1.5rem + 2.8vw, 3.4rem);
font-weight: 500;
line-height: 1.08;
letter-spacing: -.02em;
margin: 0 0 .8rem;
color: var(--kroa-grafito);
}
/* — Carrusel de destinos — */
.kroa-carrusel { margin-bottom: clamp(2rem, 4vw, 3rem); }
.kroa-carrusel__cabecera {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 1.5rem;
margin-bottom: 1.4rem;
}
.kroa-carrusel__titulo {
font-family: var(--kroa-serif);
font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem);
font-weight: 500;
margin: 0;
color: var(--kroa-grafito);
}
.kroa-carrusel__mandos { display: flex; gap: .5rem; flex: 0 0 auto; }
.kroa-carrusel.sin-mandos .kroa-carrusel__mandos { display: none; }
.kroa-carrusel__flecha {
width: 42px;
height: 42px;
display: grid;
place-items: center;
border-radius: 50%;
border: 1px solid var(--kroa-borde);
background: var(--kroa-blanco-calido);
color: var(--kroa-grafito);
cursor: pointer;
transition: background-color var(--kroa-transicion),
border-color var(--kroa-transicion),
opacity var(--kroa-transicion);
}
.kroa-carrusel__flecha svg { width: 18px; height: 18px; }
.kroa-carrusel__flecha:hover:not(:disabled) {
background: var(--kroa-rana);
border-color: var(--kroa-rana);
color: #fff;
}
.kroa-carrusel__flecha:disabled { opacity: .35; cursor: default; }
/* La pista se desplaza con scroll nativo: funciona con dedo, rueda y teclado
aunque el JS de las flechas no llegue a cargar. */
.kroa-carrusel__pista {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(190px, 1fr);
gap: 1rem;
list-style: none;
margin: 0;
padding: 0 0 .5rem;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: thin;
overscroll-behavior-x: contain;
}
/* Ancho mínimo real en todos los tamaños: al repartir el ancho entre cinco
columnas, los nombres largos ("Centro América", "Sudamérica") se cortaban. */
@media (min-width: 700px) { .kroa-carrusel__pista { grid-auto-columns: minmax(230px, 1fr); } }
@media (min-width: 1100px) { .kroa-carrusel__pista { grid-auto-columns: minmax(240px, calc((100% - 3rem) / 4)); } }
.kroa-carrusel__item { scroll-snap-align: start; }
.kroa-carrusel__tarjeta {
display: flex;
flex-direction: column;
height: 100%;
border: 1px solid var(--kroa-borde);
border-radius: var(--kroa-radio-card);
overflow: hidden;
background: var(--kroa-blanco-calido);
text-decoration: none;
transition: box-shadow var(--kroa-transicion), border-color var(--kroa-transicion);
}
.kroa-carrusel__tarjeta:hover { box-shadow: var(--kroa-sombra); border-color: var(--kroa-arena-honda); }
.kroa-carrusel__marco {
display: block;
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--kroa-arena);
}
.kroa-carrusel__marco img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 600ms cubic-bezier(.22, .61, .36, 1);
}
/* Destinos todavía sin fotografía propia: tarjeta de marca con la inicial,
para que la fila no mezcle fotos con rectángulos vacíos. */
.kroa-carrusel__marco--sin-foto {
display: grid;
place-items: center;
background:
radial-gradient(circle at 70% 20%, rgba(135, 179, 56, .28), transparent 60%),
var(--kroa-verde-hondo);
}
.kroa-carrusel__inicial {
font-family: var(--kroa-serif);
font-size: 3.2rem;
line-height: 1;
color: rgba(255, 255, 255, .82);
letter-spacing: -.02em;
}
.kroa-carrusel__tarjeta:hover .kroa-carrusel__marco img { transform: scale(1.05); }
.kroa-carrusel__pie {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: .75rem;
padding: .85rem 1rem 1rem;
}
.kroa-carrusel__nombre {
font-family: var(--kroa-serif);
font-size: 1.02rem;
color: var(--kroa-grafito);
line-height: 1.25;
}
.kroa-carrusel__meta {
font-size: .78rem;
color: var(--kroa-tenue);
white-space: nowrap;
}
/* — Barra de filtros — */
.kroa-filtros {
display: grid;
gap: 1.1rem 1.5rem;
align-items: end;
padding: 1.4rem 1.5rem;
margin-bottom: 2rem;
background: var(--kroa-hueso);
border-radius: var(--kroa-radio-card);
grid-template-columns: 1fr;
}
@media (min-width: 760px) {
.kroa-filtros { grid-template-columns: 1.6fr 1.4fr 1fr auto; }
}
.kroa-filtros__campo { min-width: 0; }
.kroa-filtros label {
display: block;
font-size: .72rem;
font-weight: 600;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--kroa-tenue);
margin-bottom: .5rem;
}
.kroa-filtros input[type="search"],
.kroa-filtros select {
width: 100%;
border: 1px solid var(--kroa-borde);
border-radius: 999px;
background: #fff;
padding: .7em 1.1em;
font-family: var(--kroa-sans);
font-size: .95rem;
color: var(--kroa-grafito);
}
.kroa-filtros select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%237a776c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 1em center;
background-size: .7em auto;
padding-right: 2.4em;
cursor: pointer;
}
.kroa-filtros input[type="search"]:focus,
.kroa-filtros select:focus {
outline: none;
border-color: var(--kroa-oliva);
box-shadow: 0 0 0 3px rgba(110, 122, 79, .14);
}
.kroa-filtros__acciones { display: flex; align-items: center; gap: 1rem; }
.kroa-filtros__enviar { white-space: nowrap; }
.kroa-filtros__limpiar {
font-size: .85rem;
color: var(--kroa-tenue);
text-decoration: underline;
text-underline-offset: .2em;
white-space: nowrap;
}
.kroa-filtros__limpiar:hover { color: var(--kroa-terracota); }
/* — Rango de precio de dos pulgares — */
.kroa-precio { position: relative; padding-top: .35rem; }
.kroa-precio__pista {
position: relative;
height: 4px;
border-radius: 2px;
background: var(--kroa-arena-honda);
margin: .6rem .2rem 0;
}
.kroa-precio__activo {
position: absolute;
top: 0;
bottom: 0;
background: var(--kroa-rana);
border-radius: 2px;
}
/* Los dos deslizadores se superponen sobre la misma pista: el truco es
dejarlos sin fondo y con `pointer-events` sólo en el pulgar, para poder
agarrar cualquiera de los dos aunque se crucen. */
.kroa-precio input[type="range"] {
position: absolute;
left: 0;
right: 0;
top: .5rem;
width: 100%;
margin: 0;
background: none;
pointer-events: none;
-webkit-appearance: none;
appearance: none;
}
.kroa-precio input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
pointer-events: auto;
width: 18px;
height: 18px;
border-radius: 50%;
background: #fff;
border: 2px solid var(--kroa-verde-hondo);
box-shadow: 0 1px 4px rgba(42, 42, 40, .25);
cursor: grab;
}
.kroa-precio input[type="range"]::-moz-range-thumb {
pointer-events: auto;
width: 18px;
height: 18px;
border-radius: 50%;
background: #fff;
border: 2px solid var(--kroa-verde-hondo);
box-shadow: 0 1px 4px rgba(42, 42, 40, .25);
cursor: grab;
}
.kroa-precio input[type="range"]::-moz-range-track { background: none; }
.kroa-precio__valor {
display: block;
margin-top: 1.4rem;
font-size: .88rem;
font-weight: 600;
color: var(--kroa-grafito);
}
/* — Sugerencias del buscador — */
.kroa-buscador { position: relative; }
.kroa-buscador__sugerencias {
position: absolute;
z-index: 30;
inset-inline: 0;
top: calc(100% + .4rem);
max-height: 380px;
overflow-y: auto;
margin: 0;
padding: .4rem;
list-style: none;
background: #fff;
border: 1px solid var(--kroa-borde);
border-radius: var(--kroa-radio-card);
box-shadow: var(--kroa-sombra-alta);
}
.kroa-buscador__sugerencias[hidden] { display: none; }
.kroa-buscador__grupo {
font-size: .68rem;
font-weight: 600;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--kroa-terracota);
padding: .6rem .7rem .35rem;
}
.kroa-buscador__sugerencias a {
display: flex;
align-items: center;
gap: .7rem;
padding: .55rem .7rem;
border-radius: var(--kroa-radio);
text-decoration: none;
color: var(--kroa-grafito);
}
.kroa-buscador__sugerencias a:hover { background: var(--kroa-hueso); }
.kroa-buscador__sugerencias img {
width: 40px;
height: 40px;
object-fit: cover;
border-radius: var(--kroa-radio);
flex: 0 0 auto;
}
.kroa-buscador__nombre {
flex: 1;
font-size: .92rem;
line-height: 1.3;
min-width: 0;
}
.kroa-buscador__meta {
font-size: .82rem;
color: var(--kroa-oliva);
font-weight: 600;
white-space: nowrap;
}
.kroa-buscador__vacio {
padding: .9rem .7rem;
font-size: .9rem;
color: var(--kroa-tenue);
}
/* ═══════════════════════════════════════════════════════════════
13 · WOOCOMMERCE — la tienda es soporte, no protagonista
═══════════════════════════════════════════════════════════════ */
/* Columna flexible y altura completa: los títulos de los viajes ocupan una o
dos líneas según el destino, y sin esto las tarjetas de una misma fila
quedaban a distinta altura y el precio "bailaba" de una a otra. */
.woocommerce ul.products li.product,
.wc-block-grid__product {
display: flex;
flex-direction: column;
height: 100%;
background: var(--kroa-blanco-calido);
border: 1px solid var(--kroa-borde);
border-radius: var(--kroa-radio-card);
overflow: hidden;
transition: box-shadow var(--kroa-transicion), border-color var(--kroa-transicion);
text-align: left;
}
/* El precio se pega abajo, así queda alineado en toda la fila. */
.woocommerce ul.products li.product .price { margin-top: auto; }
.woocommerce ul.products li.product:hover { box-shadow: var(--kroa-sombra); border-color: var(--kroa-arena-honda); }
.woocommerce ul.products li.product a img { border-radius: 0; margin-bottom: 0; aspect-ratio: 4 / 3; object-fit: cover; }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
font-family: var(--kroa-serif);
font-size: 1.1rem !important;
font-weight: 500;
line-height: 1.28;
padding: 1.1rem 1.2rem .35rem;
color: var(--kroa-grafito);
}
.woocommerce ul.products li.product .price {
display: block;
padding: 0 1.2rem 1.2rem;
font-family: var(--kroa-serif);
font-size: 1.4rem;
font-weight: 600;
line-height: 1.1;
letter-spacing: -.01em;
color: var(--kroa-rana-honda);
}
.woocommerce ul.products li.product .price::after {
content: "";
display: block;
width: 28px;
height: 2px;
margin-top: .5rem;
background: var(--kroa-rana);
border-radius: 2px;
}
.woocommerce ul.products li.product .price del { font-family: var(--kroa-sans); font-size: .65em; font-weight: 400; color: var(--kroa-tenue); opacity: .7; margin-right: .4em; }
.woocommerce ul.products li.product .price ins { text-decoration: none; color: inherit; }
.woocommerce ul.products li.product .button {
margin: 0 1.2rem 1.2rem;
display: inline-block;
}
/* "Desde $X" en lugar de precio pelón para productos de viaje */
.woocommerce .price .kroa-desde {
display: block;
font-size: .7rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--kroa-tenue);
font-weight: 500;
margin-bottom: .1rem;
}
.woocommerce span.onsale {
background-color: var(--kroa-terracota);
color: #fff;
border-radius: 2px;
font-family: var(--kroa-sans);
font-size: .7rem;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
padding: .4em .9em;
min-height: 0; min-width: 0;
line-height: 1.4;
top: .8rem; left: .8rem; right: auto;
}
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info {
border-top-color: var(--kroa-oliva);
background-color: var(--kroa-oliva-tenue);
color: var(--kroa-carbon);
}
.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before { color: var(--kroa-oliva); }
.woocommerce .woocommerce-breadcrumb {
font-size: .82rem;
color: var(--kroa-tenue);
letter-spacing: .02em;
}
/* — Cabecera de archivo (catálogo y destinos) — */
/* Kadence dibuja su propia cabecera de archivo con el título ("Viajes"), y
encima va la cabecera editorial del tema ("Todos los viajes"): salían dos
titulares seguidos. Se conserva sólo la del tema. */
.woocommerce-shop .entry-hero-container-inner,
.tax-product_cat .entry-hero-container-inner,
.post-type-archive-product .entry-hero-container-inner { display: none; }
.woocommerce .entry-hero-container-inner,
.tax-product_cat .entry-hero-container-inner,
.post-type-archive-product .entry-hero-container-inner {
background: var(--kroa-hueso);
border-bottom: 1px solid var(--kroa-borde);
}
.woocommerce .entry-hero .entry-title,
.tax-product_cat .entry-hero .entry-title {
font-family: var(--kroa-serif);
font-weight: 500;
letter-spacing: -.02em;
}
/* La barra de resultados y orden: menos formulario, más pie de página. */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering select {
font-family: var(--kroa-sans);
font-size: .88rem;
color: var(--kroa-tenue);
}
/* `appearance: none` es imprescindible aquí: sin él se superponían la flecha
nativa del sistema y la que dibuja el tema, y el control se veía sucio. */
.woocommerce .woocommerce-ordering select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 1px solid var(--kroa-borde);
border-radius: 999px;
background-color: var(--kroa-blanco-calido);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%237a776c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right .95em center;
background-size: .7em auto;
padding: .6em 2.4em .6em 1.1em;
line-height: 1.3;
cursor: pointer;
}
.woocommerce .woocommerce-ordering select:focus-visible {
outline: 2px solid var(--kroa-oliva);
outline-offset: 2px;
}
/* Descripción de la categoría de destino */
.tax-product_cat .term-description {
max-width: 62ch;
color: var(--kroa-carbon);
font-size: 1.02rem;
line-height: 1.65;
}
/* Suaviza el lenguaje de e-commerce en las fichas de viaje */
.single-product .product_title { margin-bottom: .6rem; }
.single-product .summary .price {
display: block;
font-family: var(--kroa-serif);
font-size: 2.25rem;
font-weight: 700;
line-height: 1.1;
letter-spacing: -.01em;
color: var(--kroa-rana-honda);
margin-bottom: .3rem;
}
.single-product .summary .price::after {
content: "";
display: block;
width: 34px;
height: 3px;
margin-top: .6rem;
background: var(--kroa-rana);
border-radius: 2px;
}
.single-product .summary .price del { font-family: var(--kroa-sans); font-size: .55em; font-weight: 400; color: var(--kroa-tenue); opacity: .7; margin-right: .4em; display: inline-block; }
.single-product .summary .price ins { text-decoration: none; color: inherit; }
/* ═══════════════════════════════════════════════════════════════
13 bis · FICHA DE VIAJE — itinerario, incluye, ruta, salidas
═══════════════════════════════════════════════════════════════ */
/* — Duración y salidas, junto al precio — */
.kroa-viaje-datos {
display: flex;
flex-wrap: wrap;
gap: .6rem 1.75rem;
align-items: baseline;
list-style: none;
margin: 0 0 1.25rem;
padding: 0 0 1.25rem;
border-bottom: 1px solid var(--kroa-borde);
}
.kroa-viaje-datos li { display: flex; align-items: baseline; gap: .35em; margin: 0; }
.kroa-viaje-datos--ancho { flex-basis: 100%; flex-direction: column; gap: .2em; }
.kroa-viaje-datos__valor {
font-family: var(--kroa-serif);
font-size: 1.4rem;
line-height: 1;
color: var(--kroa-grafito);
font-weight: 500;
}
.kroa-viaje-datos__label {
font-size: .74rem;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--kroa-tenue);
}
.kroa-viaje-datos__texto { font-size: .95rem; color: var(--kroa-carbon); }
.kroa-viaje-impuesto {
font-size: .88rem;
color: var(--kroa-tenue);
margin: -.4rem 0 1.2rem;
}
/* — Pestañas: menos "tienda", más publicación — */
.woocommerce-tabs ul.tabs {
display: flex;
flex-wrap: wrap;
gap: .35rem 2rem;
list-style: none;
margin: 0 0 2.25rem;
padding: 0 0 .1rem;
border-bottom: 1px solid var(--kroa-borde);
}
.woocommerce-tabs ul.tabs::before,
.woocommerce-tabs ul.tabs::after,
.woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li::after { display: none !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
background: none;
border: 0;
border-radius: 0;
margin: 0;
padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
display: block;
padding: .7em 0;
font-family: var(--kroa-sans);
font-size: .93rem;
font-weight: 500;
color: var(--kroa-tenue);
text-decoration: none;
border-bottom: 2px solid transparent;
transition: color var(--kroa-transicion), border-color var(--kroa-transicion);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover { color: var(--kroa-grafito); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
color: var(--kroa-grafito);
font-weight: 600;
border-bottom-color: var(--kroa-terracota);
}
.woocommerce-Tabs-panel { max-width: 78ch; }
.woocommerce-Tabs-panel > h2:first-child { display: none; }
/* — Itinerario día por día — */
.kroa-itinerario-resumen {
background: var(--kroa-hueso);
border-radius: var(--kroa-radio-card);
padding: clamp(1.3rem, 2.5vw, 1.9rem);
margin-bottom: 2.5rem;
}
.kroa-itinerario-resumen h3 {
font-family: var(--kroa-sans);
font-size: .74rem;
font-weight: 600;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--kroa-terracota);
margin: 0 0 .9rem;
}
.kroa-itinerario-resumen p { margin: 0 0 .45rem; font-size: .95rem; }
.kroa-itinerario-resumen p:last-child { margin-bottom: 0; }
/* Línea de tiempo: cada día es una parada del recorrido */
.kroa-itinerario { position: relative; padding-left: 1.75rem; }
.kroa-itinerario::before {
content: "";
position: absolute;
left: 5px; top: .6em; bottom: .6em;
width: 1px;
background: var(--kroa-arena-honda);
}
.kroa-itinerario h3 {
position: relative;
font-family: var(--kroa-serif);
font-size: 1.16rem;
font-weight: 500;
line-height: 1.35;
color: var(--kroa-grafito);
margin: 2rem 0 .5rem;
}
.kroa-itinerario > h3:first-child { margin-top: 0; }
.kroa-itinerario h3::before {
content: "";
position: absolute;
left: -1.75rem; top: .5em;
width: 11px; height: 11px;
border-radius: 50%;
background: var(--kroa-blanco-calido);
border: 2px solid var(--kroa-oliva);
}
.kroa-itinerario p { margin: 0 0 .5rem; color: var(--kroa-carbon); }
/* — Incluye / No incluye — */
.kroa-incluye-grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 720px) { .kroa-incluye-grid { grid-template-columns: 1fr 1fr; } }
.kroa-incluye {
border-top: 2px solid;
padding-top: 1.1rem;
}
.kroa-incluye--si { border-top-color: var(--kroa-oliva); }
.kroa-incluye--no { border-top-color: var(--kroa-arena-honda); }
.kroa-incluye h3 {
font-family: var(--kroa-sans);
font-size: .74rem;
font-weight: 600;
letter-spacing: .18em;
text-transform: uppercase;
margin: 0 0 1rem;
}
.kroa-incluye--si h3 { color: var(--kroa-oliva); }
.kroa-incluye--no h3 { color: var(--kroa-tenue); }
.kroa-incluye ul { list-style: none; margin: 0; padding: 0; }
.kroa-incluye li { padding: .55rem 0; border-bottom: 1px solid var(--kroa-borde); }
.kroa-incluye li:last-child { border-bottom: 0; }
.kroa-incluye p { margin: 0; font-size: .94rem; line-height: 1.6; }
.kroa-incluye--no li { color: var(--kroa-tenue); }
/* — Ruta del circuito — */
.kroa-ruta {
list-style: none;
counter-reset: parada;
margin: 1.5rem 0 0;
padding: 0;
}
.kroa-ruta__parada {
counter-increment: parada;
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: .95rem 0 .95rem 3rem;
border-bottom: 1px solid var(--kroa-borde);
}
.kroa-ruta__parada:last-child { border-bottom: 0; }
.kroa-ruta__parada::before {
content: counter(parada, decimal-leading-zero);
position: absolute;
left: 0; top: 50%;
transform: translateY(-50%);
font-family: var(--kroa-serif);
font-size: .95rem;
color: var(--kroa-cobre);
letter-spacing: .06em;
}
.kroa-ruta__texto { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.kroa-ruta__nombre { font-weight: 600; font-size: .98rem; color: var(--kroa-grafito); }
.kroa-ruta__detalle { font-size: .87rem; color: var(--kroa-tenue); }
.kroa-ruta__mapa {
flex: 0 0 auto;
font-size: .8rem;
font-weight: 600;
color: var(--kroa-verde-hondo);
text-decoration: none;
white-space: nowrap;
border-bottom: 1px solid var(--kroa-arena-honda);
padding-bottom: 1px;
transition: border-color var(--kroa-transicion), color var(--kroa-transicion);
}
.kroa-ruta__mapa:hover { color: var(--kroa-terracota); border-bottom-color: var(--kroa-terracota); }
@media (max-width: 560px) {
.kroa-ruta__parada { flex-direction: column; align-items: flex-start; gap: .4rem; }
}
/* — Salidas — */
.kroa-salidas-datos { margin: 0 0 2rem; }
.kroa-salidas-datos dt {
font-size: .72rem;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--kroa-tenue);
margin-top: 1.15rem;
}
.kroa-salidas-datos dt:first-child { margin-top: 0; }
.kroa-salidas-datos dd {
margin: .25rem 0 0;
font-size: 1rem;
color: var(--kroa-grafito);
padding-bottom: 1.15rem;
border-bottom: 1px solid var(--kroa-borde);
}
.kroa-salidas-datos dd:last-child { border-bottom: 0; }
.kroa-salidas-cta { margin: 0; }
/* — Preguntas frecuentes — */
.kroa-faq h3 {
font-family: var(--kroa-serif);
font-size: 1.1rem;
font-weight: 500;
line-height: 1.4;
color: var(--kroa-grafito);
margin: 1.9rem 0 .45rem;
padding-top: 1.9rem;
border-top: 1px solid var(--kroa-borde);
}
.kroa-faq > h3:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.kroa-faq p { margin: 0; color: var(--kroa-carbon); font-size: .96rem; }
/* ═══════════════════════════════════════════════════════════════
13 ter · SUREFORMS CON LA MARCA
El plugin trae azul marino (#111C44) y caja blanca propios. Se
sobrescriben sus variables en vez de pelear con !important.
═══════════════════════════════════════════════════════════════ */
.srfm-form-container {
--srfm-color-scheme-primary: var(--kroa-verde-hondo);
--srfm-btn-bg-color: var(--kroa-verde-hondo);
--srfm-btn-color-hover: var(--kroa-rana-honda);
--srfm-btn-padding: 0.95em 1.9em;
--srfm-btn-font-size: 0.95rem;
--srfm-bg-color: transparent;
background: transparent !important;
padding: 0 !important;
box-shadow: none !important;
border: 0 !important;
}
#srfm-submit-btn.srfm-button {
background-color: var(--kroa-verde-hondo);
border-color: var(--kroa-verde-hondo);
border-radius: 999px;
font-family: var(--kroa-sans);
font-weight: 600;
letter-spacing: .01em;
box-shadow: 0 10px 24px -14px rgba(46, 68, 50, .9);
transition: background-color var(--kroa-transicion),
transform var(--kroa-transicion);
}
#srfm-submit-btn.srfm-button:hover {
background-color: var(--kroa-rana-honda);
border-color: var(--kroa-rana-honda);
transform: translateY(-2px);
}
/* Campos alineados con el resto del sitio */
.srfm-form .srfm-input-common,
.srfm-form input[type="text"],
.srfm-form input[type="email"],
.srfm-form input[type="tel"],
.srfm-form textarea {
border-radius: var(--kroa-radio);
border-color: var(--kroa-borde);
background: #fff;
}
.srfm-form .srfm-input-common:focus,
.srfm-form textarea:focus {
border-color: var(--kroa-oliva);
box-shadow: 0 0 0 3px rgba(110, 122, 79, .14);
}
.srfm-form .srfm-block-label,
.srfm-form label {
font-family: var(--kroa-sans);
font-weight: 600;
color: var(--kroa-carbon);
}
/* ═══════════════════════════════════════════════════════════════
14 · FORMULARIOS (SureForms + comentarios)
═══════════════════════════════════════════════════════════════ */
input[type="text"], input[type="email"], input[type="tel"],
input[type="url"], input[type="number"], input[type="date"],
input[type="search"], input[type="password"], select, textarea,
.srfm-input-common {
font-family: var(--kroa-sans);
font-size: 1rem;
color: var(--kroa-grafito);
background: #fff;
border: 1px solid var(--kroa-borde);
border-radius: var(--kroa-radio);
padding: .85em 1em;
width: 100%;
transition: border-color var(--kroa-transicion), box-shadow var(--kroa-transicion);
}
input:focus, select:focus, textarea:focus, .srfm-input-common:focus {
border-color: var(--kroa-oliva);
box-shadow: 0 0 0 3px rgba(110, 122, 79, .14);
outline: none;
}
label, .srfm-block-label {
font-family: var(--kroa-sans);
font-size: .86rem;
font-weight: 600;
color: var(--kroa-carbon);
letter-spacing: .01em;
margin-bottom: .45rem;
display: block;
}
::placeholder { color: #a9a599; }
/* ═══════════════════════════════════════════════════════════════
14 pre · ICONOGRAFÍA
Trazo continuo, esquinas redondeadas y el mismo grosor en todos:
acompañan al texto sin robarle protagonismo. Van embebidos como
máscara y no como imagen, así heredan `currentColor` y sirven igual
sobre fondo claro que sobre el verde oscuro.
═══════════════════════════════════════════════════════════════ */
:root {
/* — Por qué Kroa — */
--ic-respaldo: url('data:image/svg+xml;utf8,');
--ic-asesoria: url('data:image/svg+xml;utf8,');
--ic-riesgos: url('data:image/svg+xml;utf8,');
--ic-pagos: url('data:image/svg+xml;utf8,');
--ic-acompanamiento: url('data:image/svg+xml;utf8,');
--ic-intervencion: url('data:image/svg+xml;utf8,');
/* — Para agencias — */
--ic-paquetes: url('data:image/svg+xml;utf8,');
--ic-tarifas: url('data:image/svg+xml;utf8,');
--ic-especializada: url('data:image/svg+xml;utf8,');
--ic-satisfaccion: url('data:image/svg+xml;utf8,');
/* — Grupos — */
--ic-cotizacion: url('data:image/svg+xml;utf8,');
--ic-coordinador: url('data:image/svg+xml;utf8,');
--ic-logistica: url('data:image/svg+xml;utf8,');
/* — Proceso — */
--ic-consulta: url('data:image/svg+xml;utf8,');
--ic-diseno: url('data:image/svg+xml;utf8,');
--ic-confirmacion: url('data:image/svg+xml;utf8,');
}
/* Un icono por tarjeta, declarado con data-icono en el marcado. */
[data-icono]::before {
content: "";
display: block;
width: 1.9rem;
height: 1.9rem;
background-color: currentColor;
-webkit-mask: var(--icono) center / contain no-repeat;
mask: var(--icono) center / contain no-repeat;
}
[data-icono="respaldo"] { --icono: var(--ic-respaldo); }
[data-icono="asesoria"] { --icono: var(--ic-asesoria); }
[data-icono="riesgos"] { --icono: var(--ic-riesgos); }
[data-icono="pagos"] { --icono: var(--ic-pagos); }
[data-icono="acompanamiento"] { --icono: var(--ic-acompanamiento); }
[data-icono="intervencion"] { --icono: var(--ic-intervencion); }
[data-icono="paquetes"] { --icono: var(--ic-paquetes); }
[data-icono="tarifas"] { --icono: var(--ic-tarifas); }
[data-icono="especializada"] { --icono: var(--ic-especializada); }
[data-icono="satisfaccion"] { --icono: var(--ic-satisfaccion); }
[data-icono="cotizacion"] { --icono: var(--ic-cotizacion); }
[data-icono="coordinador"] { --icono: var(--ic-coordinador); }
[data-icono="logistica"] { --icono: var(--ic-logistica); }
[data-icono="consulta"] { --icono: var(--ic-consulta); }
[data-icono="diseno"] { --icono: var(--ic-diseno); }
[data-icono="confirmacion"] { --icono: var(--ic-confirmacion); }
/* ═══════════════════════════════════════════════════════════════
14 bis · PÁGINA "NOSOTROS"
Una sola página larga que reúne historia, filosofía, mayorista,
grupos y equipo. Al ser larga necesita dos cosas que el resto del
sitio no pedía: una navegación interna que no se pierda de vista,
y secciones con identidad propia para que no se lea como un muro.
═══════════════════════════════════════════════════════════════ */
/* — Navegación interna adherida —
Se pega justo debajo de la cabecera. El alto real de la cabecera lo
mide el JS y lo publica en --kroa-header-alto; el valor de reserva
evita que la barra se solape si el script no llega a ejecutarse. */
.kroa-subnav {
position: sticky;
top: var(--kroa-header-alto, 70px);
z-index: 400;
background: rgba(253, 251, 247, .92);
backdrop-filter: blur(8px);
border-bottom: 1px solid var(--kroa-borde);
margin-bottom: clamp(2rem, 5vw, 3.5rem);
}
.kroa-subnav__lista {
display: flex;
gap: clamp(1.2rem, 3vw, 2.4rem);
align-items: center;
max-width: var(--kroa-ancho);
margin-inline: auto;
padding: 0 var(--kroa-canal);
list-style: none;
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.kroa-subnav__lista::-webkit-scrollbar { display: none; }
.kroa-subnav__lista li { margin: 0; flex: 0 0 auto; }
.kroa-subnav a {
display: block;
padding: 1.05rem 0;
font-size: .82rem;
letter-spacing: .1em;
text-transform: uppercase;
font-weight: 600;
color: var(--kroa-tenue);
text-decoration: none;
white-space: nowrap;
border-bottom: 2px solid transparent;
transition: color var(--kroa-transicion), border-color var(--kroa-transicion);
}
.kroa-subnav a:hover { color: var(--kroa-grafito); }
.kroa-subnav a.is-active {
color: var(--kroa-rana-honda);
border-bottom-color: var(--kroa-rana);
}
/* — Todo centrado —
El centrado va enganchado a `[data-icono]`, que solo llevan las tarjetas de
esta página: así la portada, que reutiliza las mismas clases, conserva su
composición alineada a la izquierda sin necesidad de duplicar estilos. */
.kroa-razon[data-icono] { text-align: center; }
.kroa-razon[data-icono]::before {
margin: 0 auto 1.1rem;
color: var(--kroa-rana-honda);
}
.kroa-razon[data-icono] p { margin-inline: auto; max-width: 34ch; }
/* Con icono, el ordinal sobra: estas tarjetas son atributos, no una secuencia
—el número solo tiene sentido donde el orden significa algo, como el proceso. */
.kroa-razon[data-icono] .kroa-razon__num { display: none; }
.kroa-hitos,
.kroa-equipo { text-align: center; }
.kroa-proceso { text-align: center; }
.kroa-paso::before { margin-inline: auto; }
.kroa-paso p { margin-inline: auto; max-width: 32ch; }
.kroa-credenciales,
.kroa-referencias { justify-content: center; }
/* — Hitos: la trayectoria es una secuencia, y se lee como tal — */
.kroa-hitos {
display: grid;
gap: clamp(1.5rem, 4vw, 2.5rem);
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.kroa-hito { padding-top: 1.6rem; }
/* Un filete corto centrado sobre cada hito: el mismo sello que llevan los
títulos de sección, para que la trayectoria pertenezca al mismo sistema. */
.kroa-hito::before {
content: "";
display: block;
width: 46px;
height: 2px;
margin: 0 auto 1.3rem;
border-radius: 2px;
background: var(--kroa-rana);
}
.kroa-hito__anio {
display: block;
font-family: var(--kroa-serif);
font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem);
line-height: 1;
color: var(--kroa-rana-honda);
margin-bottom: .5rem;
}
.kroa-hito__texto {
margin: 0 auto;
max-width: 30ch;
font-size: .95rem;
line-height: 1.55;
color: var(--kroa-carbon);
}
/* — Filosofía: el único momento en que la rana es protagonista — */
.kroa-filosofia { position: relative; overflow: hidden; text-align: center; }
.kroa-filosofia .kroa-lead { margin-inline: auto; }
.kroa-filosofia::after {
content: "";
position: absolute;
right: -4%;
bottom: -18%;
width: clamp(180px, 26vw, 340px);
aspect-ratio: 1;
background: var(--kroa-rana-svg) center / contain no-repeat;
opacity: .13;
pointer-events: none;
}
.kroa-filosofia > * { position: relative; z-index: 1; }
.kroa-filosofia__frase {
font-family: var(--kroa-serif);
font-size: clamp(1.6rem, 1.1rem + 2.2vw, 2.6rem);
font-style: italic;
line-height: 1.3;
color: #fff;
max-width: 20ch;
margin: 0 auto var(--e4);
}
.kroa-filosofia__frase em { color: var(--kroa-rana-viva); font-style: italic; }
/* — Proceso en pasos — */
.kroa-proceso {
display: grid;
gap: clamp(1.5rem, 3vw, 2.5rem);
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
counter-reset: paso;
}
.kroa-paso { counter-increment: paso; }
.kroa-paso::before {
content: counter(paso, decimal-leading-zero);
display: flex;
align-items: center;
justify-content: center;
width: 2.6rem;
height: 2.6rem;
margin-bottom: 1rem;
border-radius: 50%;
background: var(--kroa-oliva-tenue);
color: var(--kroa-rana-honda);
font-family: var(--kroa-serif);
font-size: 1.05rem;
}
/* Cinco pasos piden columnas más estrechas para caber en una sola fila; si no
entran, la retícula reparte sola en dos filas sin dejar huecos raros. */
.kroa-proceso--cinco { grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); }
.kroa-paso h3 {
font-family: var(--kroa-serif);
font-size: 1.2rem;
font-weight: 500;
margin: 0 0 .5rem;
color: var(--kroa-grafito);
}
.kroa-paso p { margin: 0; font-size: .96rem; line-height: 1.6; color: var(--kroa-carbon); }
/* — Equipo —
Tarjetas tipográficas, sin retrato: las fotos de equipo que hay hoy
son de banco de imágenes, y poner un modelo de stock bajo el nombre
de una persona real sería presentarlo como quien no es. La inicial
resuelve la tarjeta sin fingir nada. */
.kroa-equipo {
display: grid;
gap: clamp(1.2rem, 3vw, 2rem);
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.kroa-persona {
text-align: center;
padding: clamp(1.6rem, 3vw, 2.2rem) 1.2rem;
border: 1px solid var(--kroa-borde);
border-radius: var(--kroa-radio-card);
background: var(--kroa-blanco-calido);
transition: transform var(--kroa-transicion), box-shadow var(--kroa-transicion), border-color var(--kroa-transicion);
}
.kroa-persona:hover {
transform: translateY(-3px);
box-shadow: var(--kroa-sombra);
border-color: var(--kroa-arena-honda);
}
.kroa-persona__inicial {
display: flex;
align-items: center;
justify-content: center;
width: 3.4rem;
height: 3.4rem;
margin: 0 auto 1rem;
border-radius: 50%;
background: var(--kroa-oliva-tenue);
color: var(--kroa-rana-honda);
font-family: var(--kroa-serif);
font-size: 1.5rem;
line-height: 1;
}
.kroa-persona__nombre {
font-family: var(--kroa-serif);
font-size: 1.15rem;
font-weight: 500;
color: var(--kroa-grafito);
margin: 0 0 .2rem;
}
.kroa-persona__rol {
display: block;
font-size: .74rem;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--kroa-tenue);
}
/* — Credenciales y referencias — */
.kroa-credenciales {
display: flex;
flex-wrap: wrap;
gap: .8rem 1rem;
margin-top: var(--e3);
}
.kroa-credencial {
padding: .55em 1.1em;
border: 1px solid var(--kroa-borde);
border-radius: 999px;
background: var(--kroa-blanco-calido);
font-size: .84rem;
color: var(--kroa-carbon);
}
.kroa-credencial strong { color: var(--kroa-grafito); font-weight: 600; }
.kroa-referencias {
display: flex;
flex-wrap: wrap;
gap: .6rem 1.6rem;
margin: var(--e3) 0 0;
padding: 0;
list-style: none;
font-size: .9rem;
}
.kroa-referencias a {
color: var(--kroa-verde-hondo);
text-decoration: none;
border-bottom: 1px solid var(--kroa-arena-honda);
padding-bottom: 2px;
transition: color var(--kroa-transicion), border-color var(--kroa-transicion);
}
.kroa-referencias a:hover { color: var(--kroa-rana-honda); border-bottom-color: var(--kroa-rana); }
/* ═══════════════════════════════════════════════════════════════
15 · UTILIDADES Y RESPONSIVE
═══════════════════════════════════════════════════════════════ */
.kroa-contacto-grid { display: grid; gap: clamp(2rem, 5vw, 4rem); }
@media (min-width: 900px) { .kroa-contacto-grid { grid-template-columns: 1.1fr .9fr; } }
.kroa-datos { max-width: 42ch; }
.kroa-dato { padding: 1.25rem 0; border-bottom: 1px solid var(--kroa-borde); }
.kroa-dato:last-child { border-bottom: 0; }
.kroa-dato__label {
font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
color: var(--kroa-tenue); display: block; margin-bottom: .3rem;
}
.kroa-dato__valor { font-size: 1.02rem; color: var(--kroa-grafito); }
.kroa-oculto-visual {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden; clip: rect(0, 0, 0, 0);
white-space: nowrap; border: 0;
}
img { max-width: 100%; height: auto; }
@media (max-width: 781px) {
.kroa-hero.wp-block-cover { min-height: clamp(500px, 82svh, 700px); }
.kroa-hero h1 { max-width: none; }
.kroa-hero-destinos { gap: .4rem 1.1rem; margin-top: 1.8rem; }
.kroa-section { padding-block: clamp(3rem, 10vw, 4.5rem); }
.kroa-cifras { grid-template-columns: repeat(2, 1fr); }
}
@media print {
.kroa-wa-float, #main-header, .site-footer { display: none !important; }
}