/** * Kroa Tour — Piel oscura "Luxury Travel". * * Hoja de sobrescritura: se encola DESPUÉS de style.css y no lo modifica. * Quitar el `wp_enqueue_style` de `kroa-oscuro` en functions.php devuelve el * sitio a la paleta clara tal cual estaba, sin tocar nada más. * * El tema ya estaba bien tokenizado —469 lecturas de `var(--kroa-*)` y el * mapeo de Kadence concentrado en un solo bloque—, así que la mayor parte * del sitio cambia con sólo repuntar las variables. Lo que sigue después * son los flecos: los sitios donde el color venía escrito a mano y no * podían seguir a la variable. */ /* ═══════════════════════════════════════════════════════════════ 1 · REPUNTADO DE TOKENS Los nombres se conservan aunque ya no describan el color (`hueso` ya no es hueso). Renombrarlos obligaría a reescribir las 469 referencias y el riesgo no compensa: lo que importa es que el ROL de cada token se mantiene —fondo de página, superficie alterna, texto, hairline— y ese rol sí sigue siendo cierto. ═══════════════════════════════════════════════════════════════ */ :root { /* — Superficies, de la más profunda a la más elevada — */ --kroa-blanco-calido: #06110a; /* fondo de página */ --kroa-hueso: #09170d; /* sección alterna */ --kroa-arena: #0c1e13; /* superficie elevada (cards) */ --kroa-oliva-tenue: #0e2416; /* superficie sutil / hover */ --kroa-arena-honda: rgba(189, 222, 68, .32); /* hairline marcada */ --kroa-borde: rgba(189, 222, 68, .18); /* hairline normal */ /* — Texto: se invierte la escala — */ --kroa-grafito: #f7f5ea; /* titulares */ --kroa-carbon: #b7c0aa; /* cuerpo */ --kroa-tenue: #8a9480; /* apagado */ /* — Acento lima: la rana deja de ser un detalle y pasa a ser el color estructural del sistema — */ --kroa-rana: #bdde44; --kroa-rana-viva: #d8ef61; --kroa-rana-honda: #a3c72f; --kroa-oliva: #bdde44; --kroa-oliva-claro: #d8ef61; /* — Acento dorado: sustituye al terracota — */ --kroa-terracota: #d7ad3b; --kroa-terracota-alt: #b8912c; --kroa-cobre: #d7ad3b; /* — CTA — */ --kroa-verde-hondo: #0e2416; --kroa-verde-hondo-h: #143120; /* — Tinta oscura para texto sobre acento claro (lima/dorado) — */ --kroa-tinta: #08160c; /* — Sombras: sobre fondo oscuro una sombra negra no se ve. Se sustituye por profundidad negra + un halo lima muy tenue que es lo que separa la tarjeta del fondo. — */ --kroa-sombra: 0 1px 2px rgba(0, 0, 0, .5), 0 10px 28px -14px rgba(0, 0, 0, .8), 0 0 0 1px rgba(189, 222, 68, .06); --kroa-sombra-alta: 0 2px 6px rgba(0, 0, 0, .55), 0 22px 50px -18px rgba(0, 0, 0, .85), 0 0 0 1px rgba(189, 222, 68, .09); /* — Kadence: las cuatro que estaban en #ffffff literal — */ --global-palette9: var(--kroa-arena); --global-palette-highlight-alt2: var(--kroa-tinta); --global-palette-btn: var(--kroa-tinta); --global-palette-btn-hover: var(--kroa-tinta); --global-palette-btn-bg: var(--kroa-rana); --global-palette-btn-bg-hover: var(--kroa-rana-viva); } /* La rana embebida traía su verde dentro del propio SVG, así que no seguía a la variable: se reemite en lima. */ :root { --kroa-rana-svg: url('data:image/svg+xml;utf8,'); } /* ═══════════════════════════════════════════════════════════════ 2 · RED DE SEGURIDAD Kadence pinta el lienzo del contenido con su propia variable y WordPress inyecta reglas de bloque con blancos literales. Sin esto quedan rectángulos blancos sobre la página oscura. ═══════════════════════════════════════════════════════════════ */ html, body, .site, .content-bg, body.content-style-unboxed .site, #wrapper, #inner-wrap, .content-container, .entry-content-wrap { background-color: var(--kroa-blanco-calido); color: var(--kroa-carbon); } .entry.single-entry, .entry.loop-entry { box-shadow: none; } /* ═══════════════════════════════════════════════════════════════ 3 · CABECERA PROPIA Sustituye a la de Kadence (ver `kroa_reemplazar_cabecera`). Va pegada arriba y semitransparente: sobre el hero deja ver la imagen, y al bajar gana cuerpo para separarse del contenido. ═══════════════════════════════════════════════════════════════ */ .kroa-cabecera { position: sticky; top: 0; z-index: 100; background-color: rgba(6, 17, 10, .72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: background-color var(--kroa-transicion), border-color var(--kroa-transicion), box-shadow var(--kroa-transicion); } .kroa-cabecera.kroa-header--scrolled { background-color: rgba(6, 17, 10, .95); border-bottom-color: var(--kroa-borde); box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .9); } .kroa-cabecera__interior { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2rem); min-height: 82px; } .kroa-cabecera__marca { flex: 0 0 auto; display: flex; align-items: center; } .kroa-cabecera__marca img, .kroa-cabecera__marca .custom-logo { max-width: 156px; height: auto; display: block; } .kroa-cabecera__nombre { font-family: var(--kroa-serif); font-size: 1.4rem; color: var(--kroa-grafito); text-decoration: none; } /* — Menú — */ .kroa-cabecera__nav { flex: 1; display: flex; justify-content: center; min-width: 0; } .kroa-menu { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 1.9rem); list-style: none; margin: 0; padding: 0; } .kroa-menu li { margin: 0; } .kroa-menu a { display: block; font-size: .76rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--kroa-carbon); text-decoration: none; padding: .4em 0; border-bottom: 1px solid transparent; transition: color var(--kroa-transicion), border-color var(--kroa-transicion); white-space: nowrap; } .kroa-menu a:hover, .kroa-menu .current-menu-item > a { color: var(--kroa-rana); border-bottom-color: var(--kroa-rana); } /* — Acciones — */ .kroa-cabecera__acciones { flex: 0 0 auto; display: flex; align-items: center; gap: .7rem; } .kroa-cabecera__cta { display: inline-flex; align-items: center; gap: .55em; padding: .8em 1.3em; border: 1px solid var(--kroa-arena-honda); border-radius: 999px; font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--kroa-grafito); text-decoration: none; transition: background-color var(--kroa-transicion), border-color var(--kroa-transicion), transform var(--kroa-transicion); } .kroa-cabecera__cta:hover { background: rgba(189, 222, 68, .1); border-color: var(--kroa-rana); color: var(--kroa-rana-viva); transform: translateY(-1px); } .kroa-cabecera__cta-icono { width: 1.05em; height: 1.05em; flex: none; } /* — Botón de menú: tres barras que se cruzan al abrir — */ .kroa-cabecera__menu { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border: 1px solid var(--kroa-arena-honda); border-radius: 50%; background: transparent; color: var(--kroa-rana); cursor: pointer; transition: background-color var(--kroa-transicion), border-color var(--kroa-transicion); } .kroa-cabecera__menu:hover { background: rgba(189, 222, 68, .1); border-color: var(--kroa-rana); } .kroa-cabecera__menu-barras, .kroa-cabecera__menu-barras::before, .kroa-cabecera__menu-barras::after { display: block; width: 17px; height: 1.5px; background: currentColor; border-radius: 2px; transition: transform var(--kroa-transicion), opacity var(--kroa-transicion); } .kroa-cabecera__menu-barras { position: relative; } .kroa-cabecera__menu-barras::before, .kroa-cabecera__menu-barras::after { content: ""; position: absolute; left: 0; } .kroa-cabecera__menu-barras::before { top: -5.5px; } .kroa-cabecera__menu-barras::after { top: 5.5px; } [aria-expanded="true"] .kroa-cabecera__menu-barras { background: transparent; } [aria-expanded="true"] .kroa-cabecera__menu-barras::before { transform: translateY(5.5px) rotate(45deg); } [aria-expanded="true"] .kroa-cabecera__menu-barras::after { transform: translateY(-5.5px) rotate(-45deg); } /* — Panel desplegable — */ .kroa-panel { border-top: 1px solid var(--kroa-borde); background: rgba(6, 17, 10, .98); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); opacity: 0; transform: translateY(-8px); transition: opacity var(--kroa-transicion), transform var(--kroa-transicion); } .kroa-panel.is-open { opacity: 1; transform: none; } .kroa-panel[hidden] { display: none; } .kroa-panel__nav { padding: var(--e2) var(--kroa-canal); } .kroa-panel__menu { list-style: none; margin: 0; padding: 0; } .kroa-panel__menu li { margin: 0; border-bottom: 1px solid var(--kroa-borde); } .kroa-panel__menu li:last-child { border-bottom: 0; } .kroa-panel__menu a { display: block; padding: .95em .2em; font-size: .84rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--kroa-carbon); text-decoration: none; } .kroa-panel__menu a:hover, .kroa-panel__menu .current-menu-item > a { color: var(--kroa-rana); } .kroa-panel__pie { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; padding: var(--e2) var(--kroa-canal) var(--e3); border-top: 1px solid var(--kroa-borde); font-size: .84rem; } .kroa-panel__wa { color: var(--kroa-rana); font-weight: 700; text-decoration: none; } .kroa-panel__tel { color: var(--kroa-tenue); text-decoration: none; } body.kroa-panel-abierto { overflow: hidden; } /* En escritorio el menú va visible y el panel sobra; por debajo de 1024 se invierte: el menú horizontal no cabe y manda el panel. */ @media (max-width: 1024px) { .kroa-cabecera__nav { display: none; } .kroa-cabecera__interior { min-height: 68px; } .kroa-cabecera__marca { flex: 1; } .kroa-cabecera__marca img, .kroa-cabecera__marca .custom-logo { max-width: 124px; } } @media (min-width: 1025px) { .kroa-cabecera__menu { display: none; } .kroa-panel { display: none !important; } } @media (max-width: 560px) { .kroa-cabecera__cta span { display: none; } .kroa-cabecera__cta { padding: .8em; border-radius: 50%; } } @media (prefers-reduced-motion: reduce) { .kroa-panel { transition: none; } } /* ═══════════════════════════════════════════════════════════════ 3bis · HERO CINEMATOGRÁFICO Variante a pantalla completa (`[kroa_hero variante="cine"]`). La cabecera va pegada arriba y semitransparente, así que el hero sube por debajo de ella con un margen negativo: si no, quedaba una franja oscura entre ambos. ═══════════════════════════════════════════════════════════════ */ .kroa-hero--cine { position: relative; display: flex; align-items: center; min-height: min(880px, 100svh); margin-top: -82px; padding-top: 82px; overflow: hidden; background: var(--kroa-blanco-calido); isolation: isolate; } @media (max-width: 1024px) { .kroa-hero--cine { margin-top: -68px; padding-top: 68px; min-height: min(760px, 100svh); } } /* El `::before` decorativo del hero de póster no aplica aquí. */ .kroa-hero--cine::before { content: none; } /* — Escena por capas — Las tres capas comparten lienzo (1672×941 en origen), así que apiladas sin desplazar reproducen la composición original. Lo que crea la profundidad es que se muevan a distinta velocidad (ver `profundidad()` en kroa.js) y que sólo el sujeto esté enfocado. */ /* El margen tiene que cubrir la mitad de la amplitud mayor (la selva recorre 300 px, o sea ±150) o la capa descubriría su propio borde al llegar a los extremos del scroll. */ .kroa-hero__escena { position: absolute; inset: -190px -60px; z-index: 0; overflow: hidden; } @media (max-width: 900px) { .kroa-hero__escena { inset: -120px -40px; } } .kroa-hero__capa { position: absolute; display: block; pointer-events: none; } /* Fondo: desenfocado y apagado. El desenfoque no es decorativo —resuelve que el fondo lleva la rana incrustada y sin él se vería duplicada— y de paso es lo que hace que el recorte nítido se lea como "delante". */ .kroa-hero__capa--selva, .kroa-hero__capa--selva img { inset: 0; width: 100%; height: 100%; } .kroa-hero__capa--selva img { object-fit: cover; object-position: 38% 45%; filter: blur(11px) brightness(.54) saturate(.92); transform: scale(1.12); /* tapa el halo que deja el blur en los bordes */ } /* Sombra y sujeto: anclados abajo a la derecha, que es donde se sienta la rana en la composición original. El `bottom` descuenta el margen de la escena para que la rana se apoye en el borde real del hero y no 190 px más abajo, fuera de cuadro. */ .kroa-hero__capa--sombra, .kroa-hero__capa--rana { right: 60px; bottom: 190px; width: min(58%, 860px); height: auto; } @media (max-width: 900px) { .kroa-hero__capa--sombra, .kroa-hero__capa--rana { right: 40px; bottom: 120px; } } .kroa-hero__capa--sombra { opacity: .48; filter: blur(5px); } .kroa-hero__capa--rana { filter: drop-shadow(0 26px 50px rgba(0, 0, 0, .45)); } @media (max-width: 900px) { .kroa-hero__capa--sombra, .kroa-hero__capa--rana { width: min(94%, 620px); right: 0; } .kroa-hero__capa--selva img { filter: blur(9px) brightness(.5) saturate(.88); } } /* Doble velo: uno lateral que abre sitio al texto sin tapar a la rana, y otro vertical que ata el hero con la sección siguiente. */ .kroa-hero__velo { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(95deg, rgba(4, 12, 7, .88) 0%, rgba(4, 12, 7, .68) 26%, rgba(4, 12, 7, .12) 58%, rgba(4, 12, 7, .26) 100%), linear-gradient(180deg, rgba(4, 12, 7, .38) 0%, rgba(4, 12, 7, 0) 30%, rgba(6, 17, 10, .72) 100%); } .kroa-hero__contenido { position: relative; z-index: 2; width: 100%; } .kroa-hero--cine .kroa-hero__texto { max-width: 34rem; } .kroa-hero--cine .kroa-kicker { color: var(--kroa-cobre); } .kroa-hero__titular { font-family: var(--kroa-serif); font-weight: 500; font-size: clamp(3rem, 2rem + 5vw, 6rem); line-height: .94; letter-spacing: -.03em; color: var(--kroa-grafito); margin: 0 0 var(--e3); text-shadow: 0 14px 40px rgba(0, 0, 0, .45); } .kroa-hero__titular em { display: block; font-style: italic; color: var(--kroa-rana-viva); } .kroa-hero--cine .kroa-hero__bajada { font-size: clamp(1.05rem, 1rem + .35vw, 1.22rem); color: rgba(247, 245, 234, .84); max-width: 34ch; margin: 0 0 var(--e4); } .kroa-hero--cine .kroa-hero-destinos { border-top-color: rgba(247, 245, 234, .16); } .kroa-hero--cine .kroa-hero-destinos > span { color: rgba(247, 245, 234, .5); } .kroa-hero--cine .kroa-hero-destinos a { color: var(--kroa-grafito); border-bottom-color: rgba(247, 245, 234, .3); } .kroa-hero--cine .kroa-hero-destinos a:hover { color: var(--kroa-rana-viva); border-bottom-color: var(--kroa-rana); } .kroa-hero__scroll { position: absolute; right: clamp(1rem, 3vw, 2.4rem); bottom: clamp(1.5rem, 5vh, 4rem); z-index: 2; display: flex; align-items: center; gap: .8rem; writing-mode: vertical-rl; font-size: .62rem; letter-spacing: .28em; text-transform: uppercase; color: rgba(247, 245, 234, .6); } .kroa-hero__scroll-linea { width: 1px; height: 80px; background: linear-gradient(transparent, var(--kroa-rana-viva), transparent); } @media (max-width: 760px) { .kroa-hero__scroll { display: none; } .kroa-hero__fondo img { object-position: 58% center; } .kroa-hero--cine { align-items: flex-end; padding-bottom: var(--e5); } .kroa-hero--cine .kroa-hero__texto { max-width: none; } } /* ═══════════════════════════════════════════════════════════════ 3ter · CABECERA DEL CATÁLOGO — LA VENTANILLA El catálogo abre con la vista desde la ventanilla: si el hero de la portada dice "el mundo está ahí fuera", aquí ya vas de camino. Va inclinada en perspectiva para que se lea como un objeto físico y no como una foto pegada. ═══════════════════════════════════════════════════════════════ */ .kroa-catalogo-cabecera { position: relative; overflow: hidden; background: radial-gradient(ellipse at 78% 40%, rgba(215, 173, 59, .1), transparent 58%), linear-gradient(180deg, var(--kroa-hueso), var(--kroa-blanco-calido)); border-bottom: 1px solid var(--kroa-borde); } .kroa-catalogo-cabecera__rejilla { display: grid; grid-template-columns: 1fr; gap: var(--e4); align-items: center; padding-block: clamp(2.5rem, 5vw, 4.5rem); } @media (min-width: 900px) { .kroa-catalogo-cabecera__rejilla { grid-template-columns: 1fr minmax(0, 46%); gap: var(--e5); } } .kroa-catalogo-cabecera__texto { min-width: 0; } /* — La ventanilla — */ .kroa-ventanilla { perspective: 1100px; perspective-origin: 30% 50%; min-width: 0; } .kroa-ventanilla__marco { position: relative; aspect-ratio: 995 / 476; border-radius: 46% / 50%; /* óvalo de ventanilla, no círculo */ overflow: hidden; transform: rotateY(-11deg) rotateX(2deg) translateZ(0); /* El bisel: la moldura interior del avión, en tres anillos. */ box-shadow: 0 0 0 10px #cfcabb, 0 0 0 20px #b7b2a4, 0 0 0 21px rgba(0, 0, 0, .35), 0 34px 70px -26px rgba(0, 0, 0, .85); transition: transform 600ms var(--kroa-transicion); } @media (min-width: 900px) { .kroa-ventanilla__marco { margin-right: 22px; } /* deja aire al bisel */ } .kroa-ventanilla:hover .kroa-ventanilla__marco { transform: rotateY(-6deg) rotateX(1deg) translateZ(0); } .kroa-ventanilla__vista { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.06); /* la pieza ya trae marco propio: se recorta */ } /* Reflejo del cristal: una banda diagonal muy tenue. Es lo que hace que se lea "hay un vidrio delante" y no "hay un agujero". */ .kroa-ventanilla__brillo { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(118deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .04) 22%, transparent 42%); } @media (prefers-reduced-motion: reduce) { .kroa-ventanilla__marco { transition: none; } } /* ═══════════════════════════════════════════════════════════════ 4 · SECCIONES `--oscuro` ya no significa "oscura sobre página clara" —ahora todo es oscuro—: pasa a ser un escalón elevado. Los overrides de texto en blanco que ya traía siguen siendo correctos aquí, así que se conservan; sólo se ajusta el fondo para que se distinga del resto. ═══════════════════════════════════════════════════════════════ */ .kroa-section--oscuro { background-color: var(--kroa-verde-hondo); background-image: radial-gradient(ellipse at 20% 0%, rgba(189, 222, 68, .07), transparent 55%); } .kroa-section--oscuro h4, .kroa-section--oscuro h5, .kroa-section--oscuro h6 { color: var(--kroa-grafito); } /* La colisión anotada en style.css:1272 —`--oscuro h3` volvía invisible el h3 de las razones— deja de existir al ser ambos claros, pero se fija el color explícito para no depender de la herencia. */ .kroa-section--oscuro .kroa-razon h3, .kroa-section--oscuro .kroa-razon p { color: inherit; } /* ═══════════════════════════════════════════════════════════════ 5 · BOTONES El primario pasa a lima con tinta oscura: es el gesto que más define la propuesta y lo que hace que el CTA salte sobre el bosque. ═══════════════════════════════════════════════════════════════ */ .kroa-boton--wa, a.kroa-wa, .kroa-btn-wa .wp-block-button__link { background: var(--kroa-rana); color: var(--kroa-tinta); box-shadow: 0 10px 30px -12px rgba(189, 222, 68, .45); } .kroa-boton--wa:hover, a.kroa-wa:hover, .kroa-btn-wa .wp-block-button__link:hover { background: var(--kroa-rana-viva); color: var(--kroa-tinta); box-shadow: 0 14px 36px -12px rgba(189, 222, 68, .6); } .kroa-boton--linea { border-color: var(--kroa-arena-honda); color: var(--kroa-grafito); } .kroa-boton--linea:hover { border-color: var(--kroa-rana); background: rgba(189, 222, 68, .08); color: var(--kroa-rana-viva); } /* Botones genéricos de WordPress/WooCommerce. */ .wp-block-button__link, .wp-element-button, button.button, input[type="submit"], .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit { background-color: var(--kroa-rana); color: var(--kroa-tinta); border-color: transparent; } .wp-block-button__link:hover, .wp-element-button:hover, button.button:hover, input[type="submit"]:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce #respond input#submit:hover { background-color: var(--kroa-rana-viva); color: var(--kroa-tinta); } .is-style-outline .wp-block-button__link, .wp-block-button.is-style-outline > .wp-block-button__link { background: transparent; color: var(--kroa-grafito); border: 1px solid var(--kroa-arena-honda); } .is-style-outline .wp-block-button__link:hover, .wp-block-button.is-style-outline > .wp-block-button__link:hover { border-color: var(--kroa-rana); background: rgba(189, 222, 68, .08); color: var(--kroa-rana-viva); } /* ═══════════════════════════════════════════════════════════════ 6 · FLECOS: color escrito a mano que no seguía a ninguna variable ═══════════════════════════════════════════════════════════════ */ /* Tokens con doble rol. Dos variables se usaban a la vez como texto y como superficie, así que al invertirlas una de las dos caras se rompía. Son las únicas dos en todo el archivo, y aquí se les devuelve el rol que perdían. */ /* style.css:1416 — el pie usaba `grafito` (color de texto) como FONDO. Invertido daría un pie claro con el texto blanco encima. */ #colophon, .site-footer { background-color: var(--kroa-hueso); background-image: radial-gradient(ellipse at 80% 0%, rgba(189, 222, 68, .06), transparent 60%); border-top: 1px solid var(--kroa-borde); color: var(--kroa-carbon); } #colophon a, .site-footer a { color: var(--kroa-carbon); } #colophon a:hover, .site-footer a:hover { color: var(--kroa-rana); } .kroa-pie__nombre { color: var(--kroa-grafito); } .kroa-pie__titulo { color: var(--kroa-rana); } .kroa-pie__legal { border-top: 1px solid var(--kroa-borde); } /* style.css:1409 — `arena` (superficie) usada como color de texto en hover. */ .kroa-cta-canal a:hover { color: var(--kroa-rana-viva); } /* — `--kroa-verde-hondo` como texto — El mismo caso, pero repartido por todo el archivo. Ese token tenía dos trabajos: fondo de los CTA y de las secciones oscuras, y a la vez color de los enlaces sobre fondo claro. Al invertirlo gana el rol de superficie —pasa a ser verde muy oscuro— y todo lo que lo usaba como texto queda casi invisible sobre la página oscura. No se puede resolver desde la variable, porque los dos roles ahora piden valores opuestos. Se corrige donde se usa como texto. */ /* La base: sin esto TODOS los enlaces del sitio quedan verde oscuro sobre fondo oscuro. */ a { color: var(--kroa-rana); } a:hover { color: var(--kroa-rana-viva); } .kroa-blog__post-link, .kroa-testimonio--cta__enlace, .kroa-sede__ruta, .kroa-ruta__mapa, .kroa-referencias a { color: var(--kroa-rana); } .kroa-blog__post-link:hover, .kroa-testimonio--cta__enlace:hover, .kroa-sede__ruta:hover, .kroa-ruta__mapa:hover, .kroa-referencias a:hover { color: var(--kroa-rana-viva); } /* La inicial de los destinos sin foto: `arena-honda` es ahora un lima translúcido y se perdía sobre el degradado. */ .kroa-destino__sinfoto, .kroa-carrusel__inicial { color: rgba(247, 245, 234, .9); } /* style.css:1215 — el CTA de cada salida. Es un botón de contorno sobre tarjeta oscura, así que el texto tiene que ir en claro desde el principio y no sólo al pasar el cursor. Se queda en el verde de WhatsApp —que sobre la tarjeta contrasta 10:1— para que el botón siga leyéndose como lo que es; el hover sólo lo rellena. */ .kroa-salida__cta { color: var(--kroa-whatsapp); border-color: rgba(37, 211, 102, .45); background: rgba(37, 211, 102, .06); } .kroa-salida__cta:hover { background: var(--kroa-whatsapp); border-color: var(--kroa-whatsapp); color: var(--kroa-tinta); } /* style.css:199 — la tarjeta del blog tenía `background: white`. */ .kroa-blog__post { background: var(--kroa-arena); border: 1px solid var(--kroa-borde); } /* style.css:2614 */ ::placeholder { color: var(--kroa-tenue); opacity: 1; } /* Campos de formulario: fondo claro por defecto del navegador. */ input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="search"], input[type="number"], input[type="date"], input[type="password"], select, textarea { background-color: var(--kroa-arena); border: 1px solid var(--kroa-borde); color: var(--kroa-grafito); } input:focus, select:focus, textarea:focus { border-color: var(--kroa-rana); outline: none; box-shadow: 0 0 0 3px rgba(189, 222, 68, .18); } /* El desplegable nativo del `select` de Kadence traía flecha oscura. */ .woocommerce-ordering select, select { color-scheme: dark; } /* Foco visible sobre fondo oscuro: el anillo por defecto se perdía. */ :focus-visible { outline: 2px solid var(--kroa-rana); outline-offset: 2px; } /* ═══════════════════════════════════════════════════════════════ 6bis · CONTRASTE: ESTADOS Y SUPERFICIES Dos patrones que la inversión de tokens no podía resolver sola: (a) Fondos blancos escritos a mano —tarjetas, campos, desplegables—. Sobre la página oscura aparecían como rectángulos blancos. (b) "Fondo de acento + texto blanco". Antes el acento era oscuro (oliva, terracota) y el blanco encima funcionaba. Ahora el acento es lima y dorado, o sea CLARO, y el blanco encima desaparece: el texto tiene que pasar a tinta oscura. ═══════════════════════════════════════════════════════════════ */ /* — Barras de scroll — `.kroa-subnav__lista` (Nosotros) ya resolvía esto: se desplaza pero la barra no se dibuja. Faltaba aplicar el mismo tratamiento al carrusel de destinos (horizontal) y al desplegable de sugerencias del buscador (vertical) — ninguno de los dos la ocultaba, sólo `.kroa-carrusel__pista` la ponía "thin" en Firefox, y en el resto de navegadores se veía la barra nativa por encima del fondo oscuro. Sigue siendo scroll real: con el dedo, la rueda o el teclado. Sólo se oculta el dibujo de la barra. */ .kroa-carrusel__pista, .kroa-buscador__sugerencias { scrollbar-width: none; -ms-overflow-style: none; } .kroa-carrusel__pista::-webkit-scrollbar, .kroa-buscador__sugerencias::-webkit-scrollbar { display: none; } /* — (a) Superficies que quedaban en blanco — */ /* style.css:1260 — la tarjeta de "Por qué Kroa" se volvía blanca al pasar el cursor: el fallo más visible de todos. */ .kroa-razon:hover { background: var(--kroa-oliva-tenue); border-color: var(--kroa-arena-honda); } /* style.css:1920 — campos de la barra de filtros del catálogo. */ .kroa-filtros input[type="search"], .kroa-filtros select { background: var(--kroa-arena); color: var(--kroa-grafito); border-color: var(--kroa-borde); } /* style.css:2034 — desplegable del buscador con autocompletado. */ .kroa-buscador__sugerencias { background: var(--kroa-arena); border: 1px solid var(--kroa-borde); box-shadow: var(--kroa-sombra-alta); } .kroa-buscador__sugerencias a { color: var(--kroa-carbon); } .kroa-buscador__sugerencias a:hover { background: var(--kroa-oliva-tenue); color: var(--kroa-grafito); } .kroa-buscador__grupo { color: var(--kroa-tenue); } .kroa-buscador__nombre { color: var(--kroa-grafito); } .kroa-buscador__meta, .kroa-buscador__vacio { color: var(--kroa-tenue); } /* style.css:2567 y :2593 — campos de SureForms. */ .srfm-form textarea, .srfm-input-common, .srfm-form .srfm-input-common { background: var(--kroa-arena); color: var(--kroa-grafito); border-color: var(--kroa-borde); } /* El pulgar del rango de precio: en blanco se leía como un elemento ajeno al sistema; en lima es el mismo lenguaje que el resto. */ .kroa-precio input[type="range"]::-webkit-slider-thumb { background: var(--kroa-rana); border: 2px solid var(--kroa-blanco-calido); } .kroa-precio input[type="range"]::-moz-range-thumb { background: var(--kroa-rana); border: 2px solid var(--kroa-blanco-calido); } /* — (b) Texto blanco sobre acento ahora claro — */ /* style.css:1796 — flecha del carrusel de destinos. */ .kroa-carrusel__flecha:hover:not(:disabled) { color: var(--kroa-tinta); } /* style.css:2159 — etiqueta de oferta de WooCommerce. */ .woocommerce span.onsale { background-color: var(--kroa-terracota); color: var(--kroa-tinta); font-weight: 700; } /* style.css:2554 — botón de envío de SureForms. */ #srfm-submit-btn.srfm-button, .srfm-button, .srfm-submit-button { background-color: var(--kroa-rana); border-color: var(--kroa-rana); color: var(--kroa-tinta); } #srfm-submit-btn.srfm-button:hover, .srfm-button:hover, .srfm-submit-button:hover { background-color: var(--kroa-rana-viva); border-color: var(--kroa-rana-viva); color: var(--kroa-tinta); } /* Regla de cierre: cualquier botón que acabe con fondo lima o dorado lleva tinta oscura, venga de donde venga. Es la red que atrapa lo que inyecten los plugins y lo que no esté enumerado arriba. */ .wp-element-button:hover, .wp-block-button__link:hover, button.button:hover, input[type="submit"]:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover, .woocommerce #respond input#submit:hover { background-color: var(--kroa-rana-viva); color: var(--kroa-tinta); border-color: transparent; } /* WooCommerce marca el botón principal con `.alt` y le pone su propio color; sin esto el de "Reservar lugar" se salía de la paleta. */ .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt, .woocommerce .single_add_to_cart_button { background-color: var(--kroa-rana); color: var(--kroa-tinta); border-color: transparent; } /* El estado activo/pulsado se veía blanco en móvil: el navegador aplica su propio resaltado si nadie define `:active`. */ .wp-element-button:active, .wp-block-button__link:active, button.button:active, input[type="submit"]:active, .woocommerce a.button:active, .woocommerce button.button:active, .kroa-boton:active, a.kroa-wa:active, .kroa-cabecera__cta:active { background-color: var(--kroa-rana-honda); color: var(--kroa-tinta); transform: translateY(0); } /* Y el resaltado táctil de iOS/Android, que pinta un bloque claro. */ a, button, input[type="submit"], .wp-element-button { -webkit-tap-highlight-color: rgba(189, 222, 68, .2); } /* ═══════════════════════════════════════════════════════════════ 6ter · DESTINOS — óvalo tipo ojo de buey La tarjeta rectangular de fábrica se cambia por un marco ovalado: mismo lenguaje que la ventanilla del catálogo (ambas evocan una vista redonda/ ovalada, como mirar por una ventanilla de avión), pero aquí en dorado en vez del bisel gris del avión —es una insignia de destino, no literalmente una ventanilla—. `border-radius:50%` sobre una caja 4:5 ya fija (aspect- ratio en el original) da un óvalo más alto que ancho de forma automática, sin tocar el marcado. ═══════════════════════════════════════════════════════════════ */ .kroa-destino { background: transparent; border: none; } .kroa-destino:hover { box-shadow: none; } .kroa-destino__marco { max-width: 300px; margin-inline: auto; border-radius: 50%; box-shadow: 0 0 0 4px var(--kroa-blanco-calido), 0 0 0 6px rgba(215, 173, 59, .55), 0 26px 46px -18px rgba(0, 0, 0, .8); transition: box-shadow var(--kroa-transicion), transform var(--kroa-transicion); } .kroa-destino:hover .kroa-destino__marco { transform: translateY(-4px) scale(1.02); box-shadow: 0 0 0 4px var(--kroa-blanco-calido), 0 0 0 6px var(--kroa-rana), 0 30px 54px -18px rgba(0, 0, 0, .85); } .kroa-destino__pie { flex-direction: column; align-items: center; text-align: center; gap: .25rem; padding: 1.1rem .5rem 0; background: transparent; } .kroa-destino:hover .kroa-destino__pie { background: transparent; } .kroa-destino__meta { flex: none; } /* Las secciones donde vive esta sección son "auto-fit": con el marco ahora acotado a 300px, sueltan de sobra en pantallas anchas si sólo hay 2-3 tarjetas. Se centra el conjunto para que no se vea descuadrado a la izquierda. */ .kroa-destinos { justify-content: center; } @media (prefers-reduced-motion: reduce) { .kroa-destino__marco { transition: none; } } /* ═══════════════════════════════════════════════════════════════ 6quater · RUTAS DECORATIVAS Un avión sobrevolando una línea punteada, para darle vida a las secciones sin librería ni imagen extra. `kroa.js` (función `decoracionVuelo()`) la inyecta en tiempo de carga en una de cada dos `.kroa-section` —da igual la plantilla, así llega también "al resto de la web" sin tocarla a mano—; aquí sólo se define cómo se ve y, sobre todo, cómo se APILA: z-index 0, contenido normal en 1. Nunca puede quedar encima del texto ni capturar clics (`pointer-events:none` + `aria-hidden`). */ .kroa-decor { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; color: rgba(189, 222, 68, .22); } .kroa-decor__ruta { position: absolute; inset: 0; width: 100%; height: 100%; } .kroa-decor__avion { position: absolute; top: 0; left: 0; width: 22px; height: 22px; color: rgba(215, 173, 59, .65); filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .45)); } /* Ancla de respaldo: si la sección anfitriona no traía ya `position` propio, el script se la pone para que la decoración —absoluta— se recorte a su alto, no al de toda la página. */ .kroa-decor-anfitrion { position: relative; } /* El contenido real de la sección sube a su propia capa para quedar siempre por encima de la decoración, sin importar el orden en el DOM. Se excluye `.kroa-decor` a propósito: es hijo directo también, y sin el `:not()` esta regla —por ir después en la hoja— le ganaría el z-index a la suya propia y la pondría encima del contenido. */ .kroa-section > *:not(.kroa-decor) { position: relative; z-index: 1; } @media (prefers-reduced-motion: reduce) { .kroa-decor { display: none; } } /* ═══════════════════════════════════════════════════════════════ 7 · WOOCOMMERCE — legibilidad mínima El grid y las tarjetas del catálogo son markup nativo de Woo, sin prefijo `kroa-`, así que no heredaban nada del sistema de tokens. El tratamiento fino llega en su fase; esto es lo que impide que queden tarjetas blancas sobre la página oscura mientras tanto. ═══════════════════════════════════════════════════════════════ */ .woocommerce ul.products li.product, .woocommerce div.product .woocommerce-tabs ul.tabs li, .woocommerce-tabs .panel, .woocommerce .woocommerce-message, .woocommerce .woocommerce-info, .woocommerce .woocommerce-error { background-color: var(--kroa-arena); border-color: var(--kroa-borde); color: var(--kroa-carbon); } .woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce div.product .product_title { color: var(--kroa-grafito); } .woocommerce ul.products li.product .price, .woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--kroa-terracota); } .woocommerce .woocommerce-result-count, .woocommerce .woocommerce-breadcrumb, .woocommerce .woocommerce-breadcrumb a { color: var(--kroa-tenue); } .woocommerce nav.woocommerce-pagination ul, .woocommerce nav.woocommerce-pagination ul li { border-color: var(--kroa-borde); } .woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span { color: var(--kroa-carbon); } .woocommerce nav.woocommerce-pagination ul li span.current, .woocommerce nav.woocommerce-pagination ul li a:hover { background: var(--kroa-rana); color: var(--kroa-tinta); } /* ═══════════════════════════════════════════════════════════════ 7bis · SUPERFICIES DE NÚCLEO Y PLUGINS Todo lo que WordPress, WooCommerce o Spectra pintan con su propio blanco y que no pasa por los tokens del tema. ═══════════════════════════════════════════════════════════════ */ /* Tablas: núcleo, atributos de producto, carrito y pedido. */ table, .wp-block-table table, .woocommerce table.shop_table, .woocommerce table.shop_attributes, .woocommerce-cart table.cart, .woocommerce-checkout table { background: transparent; color: var(--kroa-carbon); border-color: var(--kroa-borde); } table th, table td, .woocommerce table.shop_table th, .woocommerce table.shop_table td, .woocommerce table.shop_attributes th, .woocommerce table.shop_attributes td { border-color: var(--kroa-borde); background: transparent; color: inherit; } table th, .woocommerce table.shop_table th { color: var(--kroa-grafito); } /* Woo alterna filas con un gris muy claro. */ .woocommerce table.shop_attributes tr:nth-child(even) th, .woocommerce table.shop_attributes tr:nth-child(even) td, table tbody tr:nth-child(even) { background: rgba(189, 222, 68, .03); } /* Bloques de Gutenberg con superficie propia. */ .wp-block-quote, .wp-block-pullquote, .wp-block-code, .wp-block-preformatted, .wp-block-verse { background: var(--kroa-arena); color: var(--kroa-carbon); border-color: var(--kroa-arena-honda); } .wp-block-separator, hr { border-color: var(--kroa-borde); color: var(--kroa-borde); opacity: 1; } /* Ficha de producto: pestañas, cantidad y galería. */ .woocommerce div.product .woocommerce-tabs ul.tabs { border-color: var(--kroa-borde); } .woocommerce div.product .woocommerce-tabs ul.tabs::before { border-color: var(--kroa-borde); } .woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: var(--kroa-oliva-tenue); border-color: var(--kroa-borde); } .woocommerce div.product .woocommerce-tabs ul.tabs li a { color: var(--kroa-carbon); } .woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--kroa-rana); } .woocommerce .quantity input.qty, .woocommerce div.product form.cart .variations select { background: var(--kroa-arena); color: var(--kroa-grafito); border: 1px solid var(--kroa-borde); } /* El visor de imagen del producto abre sobre un lienzo blanco. */ .pswp__bg, .woocommerce div.product div.images .woocommerce-product-gallery__trigger { background: var(--kroa-blanco-calido); } /* Avisos: Woo los pinta con fondo gris claro y borde de color. */ .woocommerce .woocommerce-message, .woocommerce .woocommerce-info, .woocommerce .woocommerce-error, .woocommerce-notices-wrapper > * { background-color: var(--kroa-oliva-tenue); color: var(--kroa-carbon); border-top-color: var(--kroa-rana); } .woocommerce .woocommerce-message a, .woocommerce .woocommerce-info a { color: var(--kroa-rana); } /* Spectra (Ultimate Addons) inyecta blancos en sus contenedores. */ .uagb-container, .uagb-column__inner-wrap, .uagb-infobox__content-wrap { background-color: transparent; } /* Comentarios. */ .comment-body, .comment-respond, #respond { background: transparent; color: var(--kroa-carbon); border-color: var(--kroa-borde); } /* ═══════════════════════════════════════════════════════════════ 8 · SUREFORMS El plugin trae su propio azul marino y caja blanca. ═══════════════════════════════════════════════════════════════ */ .srfm-form-container, .srfm-form, .srfm-single-form { background: transparent; color: var(--kroa-carbon); } .srfm-form-container label, .srfm-block label, .srfm-input-label { color: var(--kroa-grafito); } .srfm-form-container input, .srfm-form-container textarea, .srfm-form-container select { background: var(--kroa-arena); border-color: var(--kroa-borde); color: var(--kroa-grafito); } .srfm-button, .srfm-submit-button { background: var(--kroa-rana); color: var(--kroa-tinta); } /* ═══════════════════════════════════════════════════════════════ 9 · UTILIDADES DE MOVIMIENTO Reescritura en paleta nueva de la capa que se había subido suelta a producción. Son utilidades genéricas —las usa el Home actual y las reutilizarán las fases siguientes—, así que viven aquí y no dentro del contenido de una página. ═══════════════════════════════════════════════════════════════ */ /* Grano local, para aplicar a una sección concreta. */ .kroa-grano { position: relative; } .kroa-grano::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .05; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* Formas orgánicas de fondo. */ .kroa-blob { position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; animation: kroaFloat 14s ease-in-out infinite; } .kroa-blob--alt { animation-name: kroaFloat2; } @keyframes kroaFloat { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(24px, -30px) scale(1.06); } } @keyframes kroaFloat2 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-20px, 26px) scale(1.04); } } /* Cinta tipo tablero de salidas. */ .kroa-ticker { overflow: hidden; } .kroa-ticker__track { display: flex; width: max-content; animation: kroaScroll 26s linear infinite; } @keyframes kroaScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Avión recorriendo una ruta (el `offset-path` lo define quien la use). */ .kroa-vuela { offset-rotate: auto; animation: kroaVolar 10s linear infinite; } @keyframes kroaVolar { from { offset-distance: 0%; opacity: 0; } 4%, 96% { opacity: 1; } to { offset-distance: 100%; opacity: 0; } } /* Pase de abordar decorativo. */ .kroa-pase { background: var(--kroa-arena); border: 1px solid var(--kroa-borde); border-radius: 14px; display: flex; box-shadow: var(--kroa-sombra-alta); position: relative; overflow: hidden; } .kroa-pase__muesca { position: absolute; left: 76%; width: 18px; height: 18px; border-radius: 50%; } .kroa-pase__muesca--arriba { top: -9px; } .kroa-pase__muesca--abajo { bottom: -9px; } .kroa-pase__ruta { flex: 1; padding: 15px 14px 15px 18px; } .kroa-pase__talon { width: 66px; border-left: 1.5px dashed var(--kroa-arena-honda); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px 0; gap: 2px; } /* Respiración del CTA y brillo del precio. */ @keyframes kroaPulso { 0%, 100% { box-shadow: 0 10px 30px -12px rgba(189, 222, 68, .45), 0 0 0 0 rgba(189, 222, 68, .45); } 50% { box-shadow: 0 10px 30px -12px rgba(189, 222, 68, .6), 0 0 0 10px rgba(189, 222, 68, 0); } } @keyframes kroaShimmer { 0% { background-position: -120px 0; } 100% { background-position: 220px 0; } } @media (prefers-reduced-motion: reduce) { .kroa-blob, .kroa-ticker__track, .kroa-vuela { animation: none; } } /* ═══════════════════════════════════════════════════════════════ 10 · TEXTURA Un grano muy leve sobre toda la página. Sobre fondos oscuros y planos el degradado genera bandas visibles; el ruido las rompe y además es lo que da la sensación de papel/cine de la referencia. ═══════════════════════════════════════════════════════════════ */ body::after { content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } @media (prefers-reduced-motion: reduce) { body::after { display: none; } }