: indicador +/- y limpieza del marcador --- */
.cwt-faq details{list-style:none}
.cwt-faq summary{
list-style:none;cursor:pointer;
display:flex;justify-content:space-between;align-items:center;gap:20px;
}
.cwt-faq summary::-webkit-details-marker{display:none}
.cwt-faq summary::after{
content:'+';font-family:'JetBrains Mono',monospace;font-size:20px;
color:var(--cwt-orange)!important;flex:none;line-height:1;
}
.cwt-faq details[open] summary::after{content:'\2212'}
.cwt-faq .elementor-tab-content p{margin:0 0 12px}
.cwt-faq .elementor-tab-content p:last-child{margin-bottom:0}
.cwt-faq .elementor-tab-content ul{margin:0;padding-left:0}
/* rótulo de grupo dentro del acordeón */
.cwt-faq .cwt-group{display:block;margin:56px 0 10px}
.cwt-faq .cwt-group:first-of-type{margin-top:0}
/* ============================================================
18 · CONTACTO (cwt-clines)
============================================================ */
.cwt-clines .cwt-cline{
display:grid;grid-template-columns:34px 1fr;gap:16px;
padding:18px 0;border-bottom:1px solid rgba(22,69,92,0.5);align-items:start;
}
.cwt-clines .cwt-ic{
width:32px;height:32px;border-radius:50%;border:1px solid var(--cwt-line);
color:var(--cwt-orange)!important;display:grid;place-items:center;font-size:13px;
}
.cwt-clines dt{
font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:0.18em;
text-transform:uppercase;color:var(--cwt-dim)!important;line-height:1.6em;margin-bottom:2px;
}
.cwt-clines dd{font-size:15px;color:var(--cwt-cream)!important;font-weight:500;margin:3px 0 0;line-height:1.6em}
.cwt-clines dd a{color:var(--cwt-cream)!important;text-decoration:none}
.cwt-clines dd a:hover{color:var(--cwt-orange)!important}
/* ============================================================
19 · FOOTER (cwt-footer en el contenedor raíz)
============================================================ */
.cwt-footer{border-top:1px solid var(--cwt-line);position:relative;overflow:hidden}
.cwt-footer::before{
content:'';position:absolute;inset:auto 0 0 0;height:60%;pointer-events:none;
background:radial-gradient(ellipse 55% 80% at 15% 100%,rgba(232,135,58,0.05),transparent 70%);
}
.cwt-footer h4,.cwt-footer .cwt-ftitle,
.cwt-ftitle .elementor-heading-title,.cwt-ftitle p{
font-family:'JetBrains Mono',monospace!important;font-weight:500!important;
font-size:10px!important;letter-spacing:0.24em!important;
text-transform:uppercase!important;color:var(--cwt-orange)!important;
}
.cwt-footer p,.cwt-footer li{font-size:13.5px;color:var(--cwt-dim)!important;line-height:1.85em}
.cwt-ftag .elementor-heading-title,.cwt-ftag p{
font-family:'Fraunces',serif!important;font-style:italic!important;
font-weight:300!important;font-size:clamp(18px,2vw,24px)!important;
color:var(--cwt-mist)!important;
}
.cwt-ftag b{color:var(--cwt-orange)!important;font-weight:400}
/* links con flecha */
.cwt-footer .cwt-flink a,.cwt-flink a{
display:inline-flex;align-items:center;gap:0;
font-size:13.5px;color:var(--cwt-dim)!important;line-height:2.2em;
transition:color .25s,gap .25s;
}
.cwt-flink a::before{
content:'→';color:var(--cwt-orange)!important;opacity:0;width:0;overflow:hidden;
transition:all .25s var(--cwt-ease);
}
.cwt-flink a:hover{color:var(--cwt-cream)!important;gap:8px}
.cwt-flink a:hover::before{opacity:1;width:14px}
.cwt-fcoords,.cwt-fcoords p,
.cwt-fcoords .elementor-heading-title{
font-family:'JetBrains Mono',monospace!important;font-size:10px!important;
letter-spacing:0.14em!important;color:var(--cwt-dim)!important;line-height:2em!important;text-transform:uppercase!important;
}
.cwt-fbar,.cwt-fbar p,.cwt-fbar a,
.cwt-fbar .elementor-heading-title{
font-family:'JetBrains Mono',monospace!important;font-size:10px!important;
letter-spacing:0.12em!important;color:var(--cwt-dim)!important;text-transform:uppercase!important;
}
.cwt-fbar a:hover{color:var(--cwt-orange)!important}
.cwt-fbar,
.cwt-fbar .elementor-heading-title{border-top:1px solid var(--cwt-line)}
/* ============================================================
20 · WHATSAPP FLOTANTE (lo inserta el Motor v2)
============================================================ */
.cwt-wa{
position:fixed;right:22px;bottom:22px;z-index:220;
width:56px;height:56px;border-radius:50%;
background:var(--cwt-orange);color:var(--cwt-deep)!important;
display:grid;place-items:center;font-size:24px;
box-shadow:0 10px 30px rgba(3,14,20,0.55);
transition:transform .3s var(--cwt-ease),background .3s;
}
.cwt-wa:hover{transform:translateY(-3px) scale(1.05);background:var(--cwt-hot)}
/* ============================================================
21 · REVEAL alternativo (cwt-rv — lo anima el Motor v2)
Usar ESTO o Motion Effects nativos, no ambos.
============================================================ */
.cwt-rv{opacity:0;transform:translateY(34px);transition:opacity .9s var(--cwt-ease),transform .9s var(--cwt-ease)}
.cwt-rv.in{opacity:1;transform:none}
/* ============================================================
22 · MÓVIL + reduced motion
============================================================ */
@media(max-width:767px){
.cwt-card img{height:180px}
.cwt-aside{position:static!important}
}
@media(prefers-reduced-motion:reduce){
.cwt-rv{opacity:1;transform:none}
.cwt-hero,.cwt-thero{animation:none}
*{transition-duration:0.01ms!important;animation-duration:0.01ms!important}
}
/* ==============================================================
PARCHE v2.1 (23-jul-2026) — 3 módulos que el Manual referencia.
Valores extraídos verbatim del CSS interno de la vara.
============================================================== */
/* ---------- M23 · REVIEWS (cwt-tcard) ----------
Asignar cwt-tcard a cada uno de los 3 contenedores de testimonio. */
.cwt-tcard{background:#0A2835;border:1px solid #16455C;border-radius:8px;padding:34px 30px;display:flex;flex-direction:column;transition:transform .4s cubic-bezier(.22,.61,.36,1),border-color .4s}
.cwt-tcard:hover{transform:translateY(-4px);border-color:rgba(232,135,58,.4)}
.cwt-tcard .cwt-stars,.cwt-stars,
.cwt-stars .elementor-heading-title{color:#E8873A!important;letter-spacing:4px;font-size:14px}
.cwt-tcard p{margin-top:20px;font-size:14.5px;font-style:italic;font-family:'Fraunces',serif;font-weight:300;line-height:1.6em;color:#F2F5F6!important}
.cwt-tcard .cwt-tfoot{margin-top:auto;padding-top:24px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#7FA0AE!important}
.cwt-tcard .cwt-tfoot b{color:#A7C4CF!important;font-weight:500}
/* ---------- M24 · CTA FINAL (cwt-cta) ----------
Asignar cwt-cta al contenedor de sección cta-final. */
.cwt-cta{border-top:1px solid #16455C;position:relative;overflow:hidden}
.cwt-cta::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 50% at 70% 100%,rgba(232,135,58,.10),transparent 70%);pointer-events:none}
.cwt-cta>*{position:relative}
/* ---------- M25 · LINK "VIEW ALL TOURS →" (cwt-more) ---------- */
/* v6.2 · alineado a la vara (.link-more): crema con linea inferior,
el hover pasa a naranja y ABRE el hueco de la flecha. */
.cwt-more,.cwt-more a,
.cwt-more .elementor-heading-title{
font-family:'JetBrains Mono',monospace;font-size:12px;
letter-spacing:.16em;text-transform:uppercase;
color:var(--cwt-cream)!important;text-decoration:none;
display:inline-flex;align-items:center;gap:10px;
border-bottom:1px solid var(--cwt-line);padding-bottom:6px;
transition:color .3s,border-color .3s,gap .3s;
}
.cwt-more:hover,.cwt-more a:hover{
color:var(--cwt-orange)!important;border-bottom-color:var(--cwt-orange);gap:16px;
}
/* ★ v6.5 · MEDIDO: el enlace tenia 127px y su texto pide ~150.
Con shrink:1 se encogia y partia en dos lineas. */
.cwt-more{white-space:nowrap!important;flex:none!important}
/* ---------- NOTA DE TOKEN ----------
Crema fría #F2F5F6 (decisión 12-jul) en vez del #F5EFE0 de la
vara original, incluidos los rgba(). */
/* ==============================================================
AJUSTES PROPIOS — nacidos durante la construcción (jul 2026)
============================================================== */
/* --- Lockup de marca: las dos líneas --- */
.cwt-brand .elementor-heading-title{line-height:1.15}
.cwt-brand small{
display:block;font-family:'DM Sans',sans-serif;font-weight:600;
font-size:9px;letter-spacing:.42em;color:var(--cwt-orange)!important;
text-transform:uppercase;margin-top:4px;line-height:1.5;
}
/* --- Header flotante sobre el hero ---
⚠️ Esto es lo ÚNICO de posición que el CSS le pone al header.
El layout interno vive en el panel. Ver sección 3. --- */
.cwt-hdr{position:fixed;top:var(--wp-admin--admin-bar--height,0px);left:0;right:0;z-index:100}
/* ==============================================================
FORMULARIO DE RESERVAS — bloques de pasajero
Reemplazan los estilos que el JavaScript traía incrustados.
============================================================== */
.cwt-form .passenger-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.cwt-form .passenger-title{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--cwt-dim)!important}
.cwt-form .passenger-remove{background:none;border:1px solid var(--cwt-line);color:var(--cwt-dim)!important;border-radius:6px;padding:4px 10px;font-size:11px;cursor:pointer;transition:all .25s}
.cwt-form .passenger-remove:hover{border-color:var(--cwt-orange);color:var(--cwt-orange)!important}
.cwt-form .passenger-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.cwt-form .add-passenger-btn{width:100%;padding:12px;background:none;border:1px dashed var(--cwt-line);border-radius:6px;color:var(--cwt-dim)!important;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;margin:4px 0 16px;transition:all .25s}
.cwt-form .add-passenger-btn:hover{border-color:var(--cwt-orange);color:var(--cwt-orange)!important}
.cwt-form .passenger-counter{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;color:var(--cwt-dim)!important;display:block;margin-bottom:14px}
@media(max-width:600px){.cwt-form .passenger-row{grid-template-columns:1fr}}
/* ==============================================================
CWT — ESTILOS DE LAS PÁGINAS DE WOOCOMMERCE
Artinweb · 30-jul-2026
QUÉ ES: WooCommerce genera sus propias páginas (checkout, pago,
confirmación, mi cuenta) con HTML y clases fijas. No se editan
con Elementor: se diseñan por CSS apuntando a esas clases.
============================================================== */
/* ── 1 · CONTENEDOR Y RITMO ───────────────────────────────────── */
.woocommerce-order,
.woocommerce-checkout .woocommerce,
.woocommerce-order-pay .woocommerce,
.woocommerce-account .woocommerce{
position:relative; z-index:2;
max-width:1100px; margin:0 auto;
padding:40px 24px 70px;
}
/* ── 2 · TÍTULOS ──────────────────────────────────────────────── */
/* El position:static corrige el solapamiento que traía el tema */
.woocommerce h1,.woocommerce h2,.woocommerce h3,
.woocommerce-order h2,.woocommerce-order h3,
.woocommerce-column__title{
position:static!important;
color:var(--cwt-cream);
font-size:26px!important;
line-height:1.25em;
margin:32px 0 14px;
}
/* ── 3 · TEXTO GENERAL ────────────────────────────────────────── */
.woocommerce p,
.woocommerce li,
.woocommerce label,
.woocommerce address,
.woocommerce-customer-details p{
color:var(--cwt-cream);
line-height:1.6em;
opacity:1;
}
.woocommerce a{ color:var(--cwt-orange); }
.woocommerce a:hover{ color:var(--cwt-hot); }
/* ── 4 · TABLAS (pedido y totales) ────────────────────────────── */
.woocommerce table,
.woocommerce .shop_table{
width:100%;
color:var(--cwt-cream);
border:1px solid var(--cwt-line);
border-collapse:collapse;
margin-bottom:32px;
background:transparent;
}
.woocommerce table th,
.woocommerce table td{
padding:14px 16px!important;
border:1px solid var(--cwt-line)!important;
text-align:left;
}
.woocommerce table th{
background:var(--cwt-petrol);
font-weight:700;
letter-spacing:.02em;
}
.woocommerce table tfoot th,
.woocommerce table tfoot td{ font-weight:700; }
/* ── 5 · RESUMEN DEL PEDIDO (la fila de arriba) ───────────────── */
.woocommerce-order-overview{
margin:10px 0 34px; padding:0;
border:1px solid var(--cwt-line); border-radius:6px;
display:flex; flex-wrap:wrap; gap:0; list-style:none;
}
.woocommerce-order-overview li{
flex:1 1 160px; padding:16px 20px;
border-right:1px solid var(--cwt-line);
font-family:'JetBrains Mono',monospace; font-size:11px;
letter-spacing:.14em; text-transform:uppercase;
color:var(--cwt-mist);
}
.woocommerce-order-overview li:last-child{ border-right:0; }
.woocommerce-order-overview li strong{
display:block; margin-top:6px;
font-family:'DM Sans',sans-serif; font-size:16px;
letter-spacing:0; text-transform:none; color:var(--cwt-cream);
}
/* ── 6 · FORMULARIOS ──────────────────────────────────────────── */
.woocommerce .form-row,
.woocommerce #payment .form-row{
clear:both; float:none; width:100%; margin-bottom:16px;
}
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="password"],
.woocommerce textarea,
.woocommerce select{
width:100%; box-sizing:border-box;
padding:12px 14px;
background:var(--cwt-petrol);
color:var(--cwt-cream);
border:1px solid var(--cwt-line);
border-radius:4px;
font-size:15px;
}
.woocommerce input:focus,
.woocommerce textarea:focus,
.woocommerce select:focus{
outline:none; border-color:var(--cwt-orange);
}
.woocommerce label{ display:block; margin-bottom:6px; font-size:14px; }
.woocommerce .required{ color:var(--cwt-orange); border:0; }
/* ── 7 · MÉTODOS DE PAGO ──────────────────────────────────────── */
.woocommerce #payment,
.woocommerce ul.payment_methods{
background:transparent;
border:1px solid var(--cwt-line); border-radius:6px;
padding:20px; margin-bottom:24px; list-style:none;
}
.woocommerce ul.payment_methods{ border:0; padding:0; margin-bottom:12px; }
.woocommerce ul.payment_methods li{
padding:12px 0; border-bottom:1px solid var(--cwt-line);
}
.woocommerce ul.payment_methods li:last-child{ border-bottom:0; }
.woocommerce ul.payment_methods label{ display:inline; margin-left:8px; font-weight:700; }
.woocommerce .payment_box{
background:var(--cwt-petrol)!important;
color:var(--cwt-cream)!important;
border-radius:4px; padding:14px 16px!important; margin-top:10px;
font-size:14px;
}
.woocommerce .payment_box::before{ display:none!important; }
/* ── 8 · BOTONES ──────────────────────────────────────────────── */
.woocommerce #place_order,
.woocommerce button[type="submit"],
.woocommerce .button,
.woocommerce a.button{
background:var(--cwt-orange)!important;
color:var(--cwt-deep)!important;
border:none!important;
padding:15px 30px!important;
border-radius:4px!important;
font-weight:700; font-size:13px;
letter-spacing:.1em; text-transform:uppercase;
float:none; display:inline-block; margin-top:8px;
cursor:pointer;
transition:background .3s,transform .3s;
}
.woocommerce #place_order:hover,
.woocommerce button[type="submit"]:hover,
.woocommerce .button:hover{
background:var(--cwt-hot)!important; transform:translateY(-2px);
}
/* ── 9 · AVISO DE PRIVACIDAD ──────────────────────────────────── */
.woocommerce-privacy-policy-text{
display:block; clear:both;
margin:0 0 22px; font-size:13px; opacity:.8;
}
/* ── 10 · AVISOS DEL SISTEMA (éxito, error, info) ─────────────── */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info{
background:var(--cwt-petrol)!important;
color:var(--cwt-cream)!important;
border:1px solid var(--cwt-line)!important;
border-top:3px solid var(--cwt-orange)!important;
border-radius:4px; padding:16px 20px!important;
margin-bottom:24px; list-style:none;
}
.woocommerce-error{ border-top-color:#C0392B!important; }
.woocommerce-message::before,
.woocommerce-error::before,
.woocommerce-info::before{ display:none!important; }
/* ── 11 · MI CUENTA ───────────────────────────────────────────── */
.woocommerce-MyAccount-navigation ul{ list-style:none; padding:0; }
.woocommerce-MyAccount-navigation li{
border-bottom:1px solid var(--cwt-line);
}
.woocommerce-MyAccount-navigation li a{
display:block; padding:12px 0;
font-family:'JetBrains Mono',monospace; font-size:11px;
letter-spacing:.14em; text-transform:uppercase;
}
.woocommerce-MyAccount-navigation li.is-active a{ color:var(--cwt-cream); }
/* ── 12 · LO QUE NO APLICA A ESTE NEGOCIO ─────────────────────── */
/* Tours virtuales: sin envío. Sin cupones. */
.woocommerce .checkout_coupon,
.woocommerce .coupon,
.woocommerce-shipping-fields,
.woocommerce .cart-discount,
.woocommerce-shipping-totals{ display:none!important; }
/* ── 13 · MÓVIL ───────────────────────────────────────────────── */
@media (max-width:600px){
.woocommerce-order,
.woocommerce-checkout .woocommerce,
.woocommerce-order-pay .woocommerce,
.woocommerce-account .woocommerce{ padding:28px 16px 50px; }
.woocommerce h1,.woocommerce h2,.woocommerce h3,
.woocommerce-order h2,.woocommerce-order h3{ font-size:21px!important; }
.woocommerce table thead{ display:none; }
.woocommerce table tr{
display:block; margin-bottom:14px;
border:1px solid var(--cwt-line);
}
.woocommerce table td,
.woocommerce table th{
display:flex; justify-content:space-between; gap:14px;
border:0!important; border-bottom:1px solid var(--cwt-line)!important;
padding:12px 14px!important; text-align:right;
}
.woocommerce table tr td:last-child{ border-bottom:0!important; }
.woocommerce-order-overview{ flex-direction:column; }
.woocommerce-order-overview li{
border-right:0; border-bottom:1px solid var(--cwt-line);
}
.woocommerce-order-overview li:last-child{ border-bottom:0; }
.woocommerce #place_order,
.woocommerce .button{ width:100%; text-align:center; }
}
/* ============ fin del módulo de WooCommerce ============ */
/* ==============================================================
MÓDULOS DE PÁGINA (integrados desde v3.3 — antes vivían sueltos
dentro de widgets HTML, lo que los volvía imposibles de mantener)
============================================================== */
/* --- Panel de ayuda de la FAQ (cwt-help dentro de cwt-aside) --- */
.cwt-help h3{
font-family:'Fraunces',serif;font-weight:400;font-size:23px;line-height:1.2em;
color:var(--cwt-cream)!important;margin:14px 0 12px;
}
.cwt-help p{font-size:14px;color:var(--cwt-dim)!important;line-height:1.7em;margin:0 0 24px}
.cwt-help .cwt-hrow{
display:flex;align-items:center;gap:13px;
padding:15px 0;border-top:1px solid rgba(22,69,92,0.6);
}
.cwt-help .cwt-hrow:last-of-type{border-bottom:1px solid rgba(22,69,92,0.6)}
.cwt-help .cwt-hic{
width:30px;height:30px;border-radius:50%;border:1px solid var(--cwt-line);
color:var(--cwt-orange)!important;display:grid;place-items:center;font-size:13px;flex-shrink:0;
}
.cwt-help .cwt-hrow a{font-size:14px;color:var(--cwt-cream)!important;font-weight:500;text-decoration:none;transition:color .25s}
.cwt-help .cwt-hrow a:hover{color:var(--cwt-orange)!important}
.cwt-help .cwt-hbtn{
display:block;text-align:center;margin-top:26px;padding:15px 20px;
background:var(--cwt-orange);color:var(--cwt-deep)!important;
font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.16em;
text-transform:uppercase;font-weight:500;border-radius:6px;text-decoration:none;
transition:filter .25s;
}
.cwt-help .cwt-hbtn:hover{filter:brightness(1.08)}
.cwt-help .cwt-hnote{
font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.1em;
text-transform:uppercase;color:var(--cwt-dim)!important;text-align:center;
margin:14px 0 0;line-height:1.8em;
}
/* --- Párrafos de cuerpo en Editor de texto (cwt-body) ---
El tema colapsa el margen entre . Esta clase lo devuelve.
Para el Overview del tour usar cwt-lead, que sí lleva medida. --- */
.cwt-body p,.cwt-bio-text p{margin:0 0 18px;line-height:1.8em;color:var(--cwt-mist)!important}
.cwt-body p:last-child,.cwt-bio-text p:last-child{margin-bottom:0}
/* ==============================================================
REMATES — campos dinámicos de Pods y detalles de construcción.
⚠️ ORDEN DE CARGA: esto va AL FINAL y le gana a todo lo de
arriba. Si un valor de acá contradice al kit, gana este.
Por eso .cwt-bigprice vive SOLO aquí.
============================================================== */
/* Campos dinámicos de Pods: el valor sale SIN
, así que la
clase tiene que pintar el contenedor del widget. */
.cwt-from,.cwt-from .elementor-widget-container,
.cwt-vk,.cwt-vk .elementor-widget-container{
font-family:'JetBrains Mono',monospace!important;font-size:10px!important;
letter-spacing:0.2em!important;text-transform:uppercase!important;
color:var(--cwt-dim)!important;
}
/* ⚠️ PRECIO GRANDE — 30px, no 46px. Única definición del archivo.
La vara usa 46px pero asume un panel más ancho; a 380px el
texto "$145 / person" se parte. Verificado 3-ago con Marcos. */
.cwt-bigprice,.cwt-bigprice .elementor-widget-container,
.cwt-bigprice .elementor-heading-title,.cwt-bigprice p{
font-family:'Fraunces',serif!important;font-weight:300!important;
font-size:30px!important;line-height:1.1!important;
color:var(--cwt-cream)!important;margin:0;
}
.cwt-micro,.cwt-micro .elementor-widget-container{
font-family:'JetBrains Mono',monospace!important;font-size:9.5px!important;
letter-spacing:0.1em!important;text-transform:uppercase!important;
color:var(--cwt-dim)!important;text-align:center;line-height:1.8em!important;
}
/* Botón de reserva a todo el ancho del panel */
.cwt-aside .cwt-btn-reserva,
.cwt-aside .elementor-widget-shortcode a,
.cwt-aside .elementor-widget-shortcode button{
display:block!important;width:100%!important;
text-align:center!important;box-sizing:border-box;
}
/* Cronograma multi-día: subtítulos de día y nota de ruta */
.cwt-itin h3{
font-family:'Fraunces',serif;font-weight:400;font-size:20px;
color:var(--cwt-cream)!important;margin:36px 0 24px;
}
.cwt-itin h3:first-child{margin-top:0}
.cwt-itin p{
font-size:13px;color:var(--cwt-dim)!important;line-height:1.7em;
margin:8px 0 0;border-top:1px solid var(--cwt-line);padding-top:16px;
}
.cwt-itin p strong{color:var(--cwt-cream)!important;font-weight:600}
/* Badges del tour — pastillas alineadas a la izquierda.
⚠️ Los border-top/bottom son correctos MIENTRAS los badges
vivan en su propia sección. Si se mueven al hero como chips
(cwt-tchips, sección 12B), este bloque completo se borra. */
.cwt-tbadges{
border-top:1px solid var(--cwt-line);
border-bottom:1px solid var(--cwt-line);
}
.cwt-tbadges .elementor-icon-box-wrapper{
display:flex!important;
align-items:center;
gap:10px;
border:1px solid var(--cwt-line);
border-radius:24px;
padding:9px 18px;
text-align:left!important;
}
.cwt-tbadges .elementor-icon-box-icon{
margin:0!important;
font-size:13px;
}
.cwt-tbadges .elementor-icon-box-title{
margin:0!important;
font-family:'JetBrains Mono',monospace!important;
font-size:10px!important;
letter-spacing:.16em!important;
text-transform:uppercase!important;
color:var(--cwt-cream)!important;
white-space:nowrap;
}
/* ==============================================================
REFUERZO DEL CRONOGRAMA (cwt-itin)
⚠️ ESTE BLOQUE VA AL FINAL A PROPÓSITO.
El tema pinta `.elementor-widget-text-editor ul li` con más
especificidad que `.cwt-itin li` de la sección 10, y le
metía borde, margen y display propios. Acá se sube la
especificidad y se anulan esos valores uno por uno.
Si algún día se limpia esa regla del tema, este bloque se
puede borrar y la sección 10 vuelve a bastar sola.
============================================================== */
.cwt-itin ul,
.cwt-itin .elementor-widget-container ul{
list-style:none!important;margin:0!important;padding:0!important;
}
.cwt-itin ul li,
.cwt-itin .elementor-widget-container ul li{
position:relative!important;
display:block!important;
list-style:none!important;
margin:0!important;
padding:0 0 30px 116px!important;
border:0!important;
min-height:44px;
font-size:13.5px!important;
color:var(--cwt-dim)!important;
line-height:1.6em!important;
}
.cwt-itin ul li:last-child{padding-bottom:0!important}
/* la hora: columna naranja a la izquierda */
.cwt-itin ul li strong{
position:absolute!important;left:0!important;top:1px!important;
width:76px!important;text-align:right!important;
font-family:'JetBrains Mono',monospace!important;
font-weight:500!important;font-size:11px!important;
letter-spacing:0.08em!important;color:var(--cwt-orange)!important;
}
/* el título del paso */
.cwt-itin ul li b{
display:inline!important;font-style:normal!important;font-weight:600!important;
font-family:'Fraunces',serif!important;font-size:16px!important;
color:var(--cwt-cream)!important;
}
/* punto + línea vertical que une los pasos */
.cwt-itin ul li::before{
content:''!important;position:absolute!important;
left:90px!important;top:5px!important;
width:10px!important;height:10px!important;border-radius:50%!important;
border:1.5px solid var(--cwt-orange)!important;
background:var(--cwt-deep)!important;
transition:all .4s var(--cwt-ease);z-index:1;
}
.cwt-itin ul li::after{
content:''!important;position:absolute!important;
left:94.5px!important;top:18px!important;bottom:-4px!important;
width:1px!important;height:auto!important;
background:var(--cwt-line)!important;border:0!important;
}
.cwt-itin ul li:last-child::after{display:none!important}
.cwt-itin ul li:hover::before{
background:var(--cwt-orange)!important;
box-shadow:0 0 12px rgba(232,135,58,0.6);
}
@media(max-width:640px){
.cwt-itin ul li,
.cwt-itin .elementor-widget-container ul li{padding-left:92px!important}
.cwt-itin ul li strong{width:56px!important;font-size:10px!important}
.cwt-itin ul li::before{left:68px!important}
.cwt-itin ul li::after{left:72.5px!important}
}
/* ==============================================================
CRONOGRAMA — REALCE (A: hover de fila · B: salida y llegada)
Va después del bloque de refuerzo porque encima de él pinta.
============================================================== */
/* --- transiciones: sin esto los cambios entran de golpe --- */
.cwt-itin ul li{
transition:transform .35s var(--cwt-ease),color .3s var(--cwt-ease);
}
.cwt-itin ul li strong,
.cwt-itin ul li b{
transition:color .3s var(--cwt-ease),text-shadow .35s var(--cwt-ease);
}
/* --- A · toda la fila reacciona, no solo el punto --- */
.cwt-itin ul li:hover{
transform:translateX(4px);
color:var(--cwt-mist)!important;
}
.cwt-itin ul li:hover strong{
color:var(--cwt-hot)!important;
text-shadow:0 0 14px rgba(251,146,27,0.45);
}
.cwt-itin ul li:hover b{
text-shadow:0 0 16px rgba(242,245,246,0.30);
}
.cwt-itin ul li:hover::before{
background:var(--cwt-orange)!important;
border-color:var(--cwt-orange)!important;
box-shadow:0 0 14px rgba(232,135,58,0.65);
}
/* --- B · el primero y el último se leen distinto ---
Salida en naranja, llegada en crema. Se ve SIEMPRE, también
en móvil, donde el hover de A no existe. */
.cwt-itin ul li:first-child::before{
background:var(--cwt-orange)!important;
border-color:var(--cwt-orange)!important;
box-shadow:0 0 10px rgba(232,135,58,0.40);
}
.cwt-itin ul li:last-child::before{
background:var(--cwt-cream)!important;
border-color:var(--cwt-cream)!important;
box-shadow:0 0 10px rgba(242,245,246,0.30);
}
/* al pasar el mouse por el último, no se vuelve naranja:
conserva su lectura de "llegada" */
.cwt-itin ul li:last-child:hover::before{
background:var(--cwt-cream)!important;
border-color:var(--cwt-cream)!important;
box-shadow:0 0 16px rgba(242,245,246,0.55);
}
/* --- accesibilidad: quien pide menos movimiento conserva el
color pero pierde el desplazamiento --- */
@media(prefers-reduced-motion:reduce){
.cwt-itin ul li:hover{transform:none}
}
/* ==============================================================
PULIDO v4.0 — remates contra la vara
Va al final: pisa a las secciones de arriba a propósito.
============================================================== */
/* --- 3 · Filas del panel: aire en vez de rayas.
⚠️ SOLO dentro de .cwt-aside. La misma clase cwt-spec
viste el destacado del Home, donde las rayas sí van. --- */
.cwt-aside .cwt-spec{
border-top:1px solid var(--cwt-line);
border-bottom:1px solid var(--cwt-line);
padding:8px 0;
}
.cwt-aside .cwt-spec li,
.cwt-aside .cwt-spec .cwt-row{
border-bottom:0!important;
padding:13px 0!important;
}
/* --- 4 · Itinerario: más respiro y medida en la descripción --- */
.cwt-itin ul li,
.cwt-itin .elementor-widget-container ul li{
padding-bottom:38px!important;
max-width:calc(56ch + 116px);
}
.cwt-itin ul li:last-child{padding-bottom:0!important}
@media(max-width:640px){
.cwt-itin ul li,
.cwt-itin .elementor-widget-container ul li{max-width:100%}
}
/* --- 5 · Aire abajo de la galería.
La vara cierra el cuerpo con 130px antes del footer.
El contenedor de la galería lleva las DOS clases:
cwt-sect cwt-galsect
Se asigna a mano a propósito — ver nota de la cabecera. */
.cwt-galsect{margin-bottom:130px}
@media(max-width:767px){
.cwt-galsect{margin-bottom:80px}
}
/* ==============================================================
MÓVIL — SINGLE TOUR (<=767px)
Va al final para ganarle a todo lo de arriba.
No toca escritorio: todo vive dentro del @media.
⚠️ ESTE BLOQUE NO TOCA EL HEADER. El header se resolvió
entero en el panel el 7-ago. Ver cabecera de v4.6.
============================================================== */
@media(max-width:767px){
/* --- EL HERO MISMO.
⚠️ NOTA v4.6: el ancho de acá ya no es lo que arregla el
hero. Se deja porque no molesta y cubre el caso de un
Ancho en px que se cuele desde el panel. El colapso real
era el RELLENO LATERAL de 150px, corregido en el panel
(Avanzado → Relleno → móvil → 20 / 20).
Por eso este bloque declara padding ARRIBA y ABAJO, y
deliberadamente NO declara los laterales. --- */
.cwt-thero{
--width:100%;
--content-width:100%;
--flex-direction:column;
--align-items:stretch;
width:100%!important;
max-width:100%!important;
flex-direction:column!important;
align-items:stretch!important;
min-height:auto!important;
padding-top:110px!important;
padding-bottom:48px!important;
}
/* --- Los hijos del hero.
Por descendencia Y por hijo directo: si el hero está en
modo Caja, Elementor inserta un div.e-con-inner en medio
y el .elementor-kit-45 `>` deja de alcanzarlos.
min-width:0 es imprescindible: sin él un item flex no
encoge por debajo de su contenido (min-width:auto es el
valor inicial por especificación) y desborda. --- */
.cwt-thero .e-con-inner,
.cwt-thero .e-con,
.cwt-thero>.e-con{
--width:100%;
--content-width:100%;
width:100%!important;max-width:100%!important;
min-width:0!important;
flex:1 1 auto!important;
align-self:stretch!important;
}
.cwt-thero .elementor-widget{
width:100%!important;max-width:100%!important;
min-width:0!important;
}
/* --- Título: arranca en 26px y parte palabras largas --- */
.cwt-ttitle .elementor-heading-title,
.cwt-ttitle h1,.cwt-ttitle h2{
font-size:clamp(26px,7.4vw,34px);
line-height:1.16em;
width:100%!important;max-width:100%!important;
margin-top:16px;
overflow-wrap:break-word;word-break:normal;
}
/* --- ★ v4.6 · MIGA — se imprimía encima de sí misma.
En títulos largos ("Birdwatching Adventure – Tigre River")
la miga parte en dos o tres líneas y se montan una sobre
otra. La causa NO es el line-height: es el
display:inline-flex que hereda del patrón de rótulos
mono de la sección 5, que colapsa la caja de línea.
Subir line-height sin sacarla de inline-flex no sirve —
eso es lo que traía v4.5 y seguía encimándose.
-> display:block. El rótulo sigue viéndose igual porque
la miga no usa el guion decorativo de cwt-field.
Verificado en teléfono real el 7-ago. --- */
.cwt-crumb,
.cwt-crumb p{
display:block!important;
font-size:9px;
line-height:2.1em!important;
letter-spacing:0.14em;
white-space:normal;
}
.cwt-crumb a{
display:inline;
line-height:2.1em!important;
}
/* --- Resto de rótulos mono: devolverles el interlineado.
Sin esto se enciman en cuanto parten en dos líneas. --- */
.cwt-field .elementor-heading-title,
.cwt-field p,
.cwt-field-c .elementor-heading-title,
.cwt-field-c p{
font-size:10px!important;line-height:1.9em!important;
flex-wrap:wrap;
}
.cwt-from,.cwt-from p,.cwt-from .elementor-heading-title,
.cwt-from .elementor-widget-container,
.cwt-vk,.cwt-vk p,.cwt-vk .elementor-heading-title,
.cwt-vk .elementor-widget-container{
line-height:1.9em!important;
}
.cwt-micro,.cwt-micro p,.cwt-micro .elementor-widget-container{
line-height:2em!important;
}
/* --- Panel: ancho completo y aire propio.
El flex-shrink y el min-width:0 evitan que los 380px de
escritorio se impongan sobre una pantalla de 390px. --- */
.cwt-aside{
--width:100%;
width:100%!important;max-width:100%!important;
min-width:0!important;
flex:1 1 auto!important;
padding:24px!important;
margin-top:28px;
position:static!important;
}
.cwt-bigprice,.cwt-bigprice .elementor-widget-container,
.cwt-bigprice .elementor-heading-title,.cwt-bigprice p{
font-size:32px!important;line-height:1.2!important;
}
/* filas: etiqueta arriba, valor abajo. Lado a lado no caben. */
.cwt-aside .cwt-spec li,
.cwt-aside .cwt-spec .cwt-row{
flex-direction:column!important;
align-items:flex-start!important;
gap:3px;padding:11px 0!important;
}
.cwt-aside .cwt-spec dd,
.cwt-aside .cwt-spec li{line-height:1.6em}
/* --- Chips: que quepan y no se estiren --- */
.cwt-tchips{gap:8px;margin-top:20px}
.cwt-tchips span{font-size:9.5px;padding:7px 12px}
/* --- Secciones del cuerpo: sueltan el ancho de 1140px --- */
.cwt-sect{
--width:100%;
--content-width:100%;
width:100%!important;max-width:100%!important;
min-width:0!important;
}
.cwt-sect .e-con-inner{
--content-width:100%;
width:100%!important;max-width:100%!important;
}
/* --- ★ v4.7 · FONDO DEL HERO DEL TOUR.
Ver punto 1 de la cabecera. El % va en el ALTO, no en el
ancho, porque el hero es alto y angosto en teléfono. --- */
.cwt-thero{
background-position:center!important;
background-repeat:no-repeat!important;
animation:cwtKBmob 4s var(--cwt-ease) forwards!important;
}
/* --- ★ v4.7 · FONDO DEL HERO DEL HOME. Mismo caso: el hero
mide 858 y la foto cubría ~280. El mono salía dos veces. --- */
.cwt-hero{
background-position:center!important;
background-repeat:no-repeat!important;
animation:cwtKBmob 4s var(--cwt-ease) forwards!important;
}
/* --- ★ v4.7 · DEGRADADO DEL HOME más suave. Las dos capas de
la sección 4 se suman sobre 858px de alto y matan la foto.
Si sobre alguna foto clara el título pierde contraste, se
sube el 0.20 del tramo medio. --- */
.cwt-hero::after{
background:linear-gradient(to top,
var(--cwt-deep) 0%,
rgba(6,26,36,0.62) 28%,
rgba(6,26,36,0.20) 62%,
rgba(6,26,36,0.40) 100%)!important;
}
/* --- ★ v5.8 · LA PILDORA YA NO SE TOCA ACA. Su contrato
movil vive en la seccion 26.4 (fuente unica). Razon:
la §26 queda mas abajo en el archivo y, con !important
igualado, gana el ultimo — cualquier regla aca seria
letra muerta. Asi estuvo muerta esta regla desde v5.7,
rindiendo el telefono los valores de escritorio. --- */
/* --- ★ v4.7 · BARRA INFERIOR.
239+92+136 = 467 sobre 400 útiles: el botón envolvía. El
título se oculta porque en móvil ya está arriba. --- */
.cwt-tbar{padding:10px 12px!important}
.cwt-tbar .e-con-inner,
.cwt-tbar>.e-con{
flex-wrap:nowrap!important;
align-items:center!important;
gap:10px!important;
}
.cwt-tbar .elementor-widget:first-child{display:none!important}
.cwt-tbar .elementor-widget-button{flex:0 0 auto!important}
/* --- ★ v4.7 · WHATSAPP sobre la barra, no debajo. --- */
.cwt-wa{
bottom:76px!important;
right:16px!important;
width:48px!important;height:48px!important;
font-size:21px!important;
}
}
/* ============ fin del cuerpo heredado de v4.7 ============ */
/* ==============================================================
23 · TARJETA DE TOUR — v4.8
Elemento de bucle #145. Se usa en el Home (6) y en /tours/ (13).
Estructura del panel que da por supuesta esta seccion:
tour-card
|- card-media contenedor, columna, desbordamiento oculto
| |- card-foto Imagen destacada, SIN alto en el panel
| |- Most popular Editor de texto, absoluto 14/14 arriba-izq
| \- card-scitag Editor de texto, absoluto 14/14 abajo-izq
|- card-titulo
|- card-meta contenedor, fila, huecos 14/6, con envoltura
| |- card-meta-duracion
| \- card-meta-tipo
\- card-footer
|- Editor de texto precio + "/ person"
\- card-btn Boton con icono a la derecha
============================================================== */
/* --- 23.1 · La tarjeta como columna. El pie se empuja abajo para
que quede alineado entre tarjetas de titulo desigual. --- */
.cwt-card{
display:flex!important;
flex-direction:column!important;
height:100%;
}
/* --- ★ v5.0 · El cuerpo se estira para empujar el pie. Sin esto el
margin-top:auto del pie no tiene contra que empujar y la
separacion queda despareja segun cuantas lineas ocupe el
titulo. Se ve al comparar una tarjeta de titulo corto con una
de titulo largo en la misma fila. --- */
.cwt-card > .e-con-inner,
.cwt-card > .e-con{
display:flex!important;
flex-direction:column!important;
flex:1!important;
height:100%;
}
.cwt-card .cwt-cbody{
display:flex!important;
flex-direction:column!important;
flex:1!important;
}
/* --- 23.2 · BADGES tambien sobre Editor de texto.
Ver punto 1 de la cabecera. --- */
.cwt-badge-pop,
.cwt-badge-sig,
.cwt-badge-noc,
.cwt-badge-pop .elementor-heading-title,
.cwt-badge-sig .elementor-heading-title,
.cwt-badge-noc .elementor-heading-title,
.cwt-badge-pop p,
.cwt-badge-sig p,
.cwt-badge-noc p{
font-family:'JetBrains Mono',monospace!important;
font-size:9px!important;font-weight:500!important;
letter-spacing:0.18em!important;text-transform:uppercase!important;
color:#fff!important;padding:6px 11px!important;
border-radius:20px!important;margin:0!important;
display:inline-block!important;line-height:1.5em!important;
}
/* --- ★ v5.0 · VIDRIO. Los tres colores solidos se retiran: con
13 tours y UNA sola plantilla habia que elegir un color para
todos, y ninguno aguanta las cuatro condiciones de foto (el
verde muere en selva, el petrol en la nocturna). El vidrio no
trae color propio: toma el fondo, lo desenfoca y lo oscurece,
asi que siempre queda un escalon por debajo de la foto.
Valores calibrados sobre foto real el 7-ago. Mas bajos que la
vara (0.35/6) a proposito: en pastilla de 28px de alto, un
desenfoque alto convierte el fondo en mancha uniforme y se
lee como plastico. Menos opaco y menos blur = mas vidrio. --- */
.cwt-badge-pop,
.cwt-badge-sig,
.cwt-badge-noc{
background:rgba(6,26,36,0.25)!important;
border:1px solid rgba(242,245,246,0.30)!important;
backdrop-filter:blur(2px)!important;
-webkit-backdrop-filter:blur(2px)!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,0.22)!important;
color:#fff!important;
z-index:3;width:auto!important;
}
.cwt-badge-pop p,
.cwt-badge-sig p,
.cwt-badge-noc p{background:transparent!important;color:#fff!important}
/* --- 23.3 · ETIQUETA DE CAMPO (scitag) sobre la foto.
Fondo solido: sin backdrop-filter. Ver punto 2. --- */
.cwt-card .cwt-scitag,
.cwt-card .cwt-scitag p{
backdrop-filter:none!important;
-webkit-backdrop-filter:none!important;
background:rgba(6,26,36,0.62)!important;
margin:0!important;
}
.cwt-card .cwt-scitag{
z-index:3;
opacity:0;
transform:translateY(6px);
transition:opacity .4s var(--cwt-ease),transform .4s var(--cwt-ease);
}
.cwt-card:hover .cwt-scitag{
opacity:1;
transform:none;
}
/* si el campo plate_label esta vacio, no se pinta la pastilla */
.cwt-card .cwt-scitag p:empty{display:none!important}
/* --- 23.4 · LA FOTO DESPIERTA. Ver punto 3. --- */
.cwt-card img{
filter:saturate(.72) brightness(.94);
transition:transform .6s var(--cwt-ease),filter .6s var(--cwt-ease)!important;
}
.cwt-card:hover img{filter:saturate(1) brightness(1)}
/* --- 23.5 · LÍNEA DE CAMPO en el borde superior. --- */
.cwt-card{position:relative}
.cwt-card::after{
content:'';position:absolute;top:0;left:0;right:0;height:2px;
background:var(--cwt-orange);z-index:4;pointer-events:none;
transform:scaleX(0);transform-origin:left;
transition:transform .5s var(--cwt-ease);
}
.cwt-card:hover::after{transform:scaleX(1)}
/* --- 23.6 · EL PIE. Raya arriba y empuje hacia abajo. --- */
.cwt-card .cwt-cfoot{
margin-top:auto!important;
padding-top:18px!important;
border-top:1px solid var(--cwt-cborder)!important;
}
/* --- 23.7 · EL `/ person`. Pods se come el espacio, asi que se
reconstruye aca con un margen izquierdo. --- */
/* --- ★ v5.0 · BLINDAJE DE cwt-price. Hoy funciona solo porque el
"/ person" se escribio a mano y eso obliga a Elementor a
envolver en
. Si algun dia se borra ese texto, la etiqueta
dinamica de Pods devuelve texto pelado y el precio pierde el
estilo. Se agrega la RAIZ, igual que en los badges. --- */
.cwt-price,
.cwt-price .elementor-heading-title,
.cwt-price p{
font-family:'Fraunces',serif!important;font-size:26px!important;
font-weight:500!important;color:var(--cwt-ink)!important;
display:inline-block;margin:0;
}
.cwt-price small,
.cwt-price em{
font-family:'DM Sans',sans-serif!important;
font-size:11px!important;font-weight:600!important;font-style:normal!important;
color:var(--cwt-inksoft)!important;letter-spacing:0.03em!important;
margin-left:4px;
}
/* --- 23.8 · LA FLECHA DEL BOTÓN. Ver punto 3. --- */
/* --- ★ v5.0 · LA FLECHA NO CENTRABA. Medido en consola el 7-ago:
BOTON lh 1px · ICONO 12px | valign baseline | lh 1px
Con la caja de linea colapsada a 1px no hay contra que
centrar, y el baseline empuja el icono fuera del eje.
-> line-height explicito en los dos y el icono a middle. --- */
.cwt-card .elementor-button{
display:inline-flex!important;align-items:center!important;
line-height:1.4!important;
gap:0!important;transition:all .25s var(--cwt-ease)!important;
}
.cwt-card .elementor-button .elementor-button-content-wrapper{
display:inline-flex!important;align-items:center!important;gap:0!important;
}
.cwt-card .elementor-button .elementor-button-icon{
width:0;overflow:hidden;opacity:0;
display:inline-flex!important;align-items:center!important;
vertical-align:middle!important;line-height:1!important;
font-size:12px!important;
transition:width .3s var(--cwt-ease),opacity .3s var(--cwt-ease);
}
.cwt-card .elementor-button .elementor-button-icon svg{
width:12px;height:12px;display:block;
}
.cwt-card:hover .elementor-button{gap:8px!important}
.cwt-card:hover .elementor-button .elementor-button-icon{
width:12px;opacity:1;
}
/* --- 23.9 · El precio vira a tierra al pasar el mouse. --- */
.cwt-card .cwt-price p,
.cwt-card .cwt-price .elementor-heading-title{
transition:color .3s var(--cwt-ease);
}
.cwt-card:hover .cwt-price p,
.cwt-card:hover .cwt-price .elementor-heading-title{
color:var(--cwt-earth)!important;
}
/* --- 23.10 · RETARDOS DEL ESCALONADO.
⚠️ SOLO Home. Ver punto 6 de la cabecera: en /tours/ los
filtros redibujan la rejilla y el Motor no vuelve a mirar. --- */
.cwt-rv.cwt-card{transition-delay:0s}
.cwt-rv.cwt-card:nth-child(3n+2){transition-delay:.13s}
.cwt-rv.cwt-card:nth-child(3n+3){transition-delay:.26s}
/* --- 23.11 · EXCEPCIÓN MÓVIL.
En teléfono no hay hover: la etiqueta de campo se muestra
siempre, y los efectos que dependen del cursor se apagan
para no dejar nada a medio camino. --- */
@media(max-width:767px){
.cwt-card .cwt-scitag{
opacity:1!important;
transform:none!important;
}
.cwt-card img{filter:none!important}
.cwt-card::after{display:none!important}
.cwt-card .elementor-button .elementor-button-icon{
width:12px;opacity:1;
}
.cwt-card .elementor-button{gap:8px!important}
}
/* ==============================================================
24 · TITULAR DEL HERO DEL HOME — v5.1
La clase cwt-hero-title estaba puesta en el contenedor del H1
desde F1 pero NUNCA existio en ninguna hoja. El tamano y el peso
salian del panel del widget (56px / 700), no del kit.
Se limpio el panel el 7-ago y ahora manda esta seccion.
El max-width en ch es lo que hace el titular: fuerza el quiebre
en dos lineas, que es de donde sale el peso visual de la vara.
Sin el, el titulo entra en una linea y se lee como encabezado de
blog en vez de portada.
⚠️ Al partir en dos, el hero CRECE hacia arriba. Si los botones
quedan pegados al borde inferior, se ajusta el relleno del hero
EN EL PANEL, no aca.
============================================================== */
.cwt-hero-title,
.cwt-hero-title .elementor-heading-title,
.cwt-hero-title h1,
.cwt-hero-title p{
font-family:'Fraunces',serif!important;
font-size:clamp(52px,7.4vw,104px)!important;
font-weight:300!important;
line-height:1.02em!important;
letter-spacing:-0.02em!important;
color:var(--cwt-cream)!important;
max-width:12ch;
margin:30px 0 0;
/* ★ v5.2 · EJE OPTICO. Fraunces es variable: el eje opsz va de 9
a 144 y cambia el DIBUJO de la letra segun el tamano. Medido el
7-ago: font-variation-settings salia en `normal`, o sea que a
101px se estaba usando el dibujo de texto corrido — por eso se
veia mas pesada y menos afilada que la vara.
⚠️ Solo funciona si WordPress sirve Fraunces como VARIABLE. Si
Elementor la carga en pesos estaticos, el eje no existe y esta
linea no hace nada. Se comprueba en el render. */
font-variation-settings:'opsz' 144!important;
}
.cwt-hero-title em,
.cwt-hero-title .elementor-heading-title em{
font-style:italic!important;
font-weight:400!important;
color:var(--cwt-orange)!important;
}
/* ==============================================================
25 · REMATES DEL HERO DEL HOME — v5.2
Los cuatro salen de medir el render, no de mirarlo.
⚠️ EL PATRON DEL line-height:1px. Medido el 7-ago en TRES
lugares distintos el mismo dia: la pildora de coordenadas
(19px de alto contra los 34 de la vara), los dos botones del
hero (29 y 31, desparejos), y la flecha del boton de la
tarjeta. Sale de los estilos globales de Elementor y aplasta
la caja de linea de cualquier elemento en inline-flex.
Se corrige en las clases del kit, NO caso por caso, para que
cualquier elemento que las use nazca sano.
============================================================== */
/* --- 25.1 · PILDORA DE COORDENADAS. 8+8 de relleno mas 1px de
texto daban 19. Con interlineado real da los 34 de la vara.
★ v5.3 · Y CON EL INTERLINEADO REAL, EMPEZO A PARTIR.
Medido: 343x53 en dos lineas. El inline-flex reparte el
contenido en dos items (el texto suelto y el ), y con
white-space:normal cada item parte por dentro. Antes no se
veia porque el lh:1px lo tenia aplastado — arreglar una cosa
destapo la otra.
-> nowrap en la raiz Y en el . La pildora es una linea
siempre; si el texto no cabe, se acorta el contenido, no
se deja partir.
⚠️ En movil el bloque de v4.7 la pasa a inline-block, asi
que esta regla no le estorba: ahi ya se comporta distinto
a proposito. --- */
/* La pildora se consolido en la seccion 26. Ver el final. */
/* --- 25.2 · BOTONES DEL HERO. Mismo colapso: alto 29 y 31 en vez
de iguales. Y el radio salia 8 y 5 porque cada uno traia el
suyo del panel; el kit los unifica en 4. --- */
.cwt-btn-main .elementor-button,
.cwt-btn-out .elementor-button{
line-height:1.4!important;
border-radius:4px!important;
padding:15px 30px!important;
}
.cwt-btn-main .elementor-button span,
.cwt-btn-out .elementor-button span{
line-height:1.4!important;
}
/* --- 25.3 · TEXTO DE APOYO. Medido en 1140px de ancho: cruzaba la
pantalla entera y obligaba al ojo a barrer de lado a lado. La
vara lo limita a 52 caracteres, que es la medida comoda de
lectura. Se acota por el contenedor del hero para no tocar
parrafos de otras secciones. --- */
.cwt-hero p{
max-width:52ch;
}
/* ==============================================================
v6.6 · CIERRE DEL HOME — 8-ago-2026
1. cwt-hsect: titulo de seccion del Home (los de cuerpo de
tour siguen en cwt-h2 — son escalas distintas a proposito).
2. Tours: titulo en tinta sobre el velo claro; cwt-inv lo
invierte a crema sobre foto oscura. Cierra el lavado.
3. cwt-coordtag: tercer .elementor-kit-45 (el texto salia petroleo
sobre petroleo, dif:35 medida) + width:max-content.
4. cwt-featrow / cwt-featimg: columnas 1.05/1 + cover 4/4.6.
5. Auditoria de tres .elementor-kit-45es sobre TODO el kit, no una
muestra. La v6.4 corrigio 6 encontradas a mano; esta pasada
es programatica sobre toda clase que declare tipografia.
PENDIENTE CONOCIDO: el rail de senderos (etiquetas de los
puntos no visibles) — decorativo, medirlo la proxima sesion.
============================================================== */
/* ==============================================================
v6.5 · BLINDAJE COMPLETO — 8-ago-2026
TERCERA VUELTA SOBRE LA MISMA CAUSA. Y la ultima, porque esta
vez el barrido fue sobre TODAS las clases que declaran color,
no sobre un subconjunto.
QUE PASO: la v6.3 blindo 10 clases. El filtro que use exigia
que la regla ya tuviera `font-family:!important`, asi que dejo
afuera a las 22 restantes. La v6.4 corrigio los .elementor-kit-45es.
Y hoy volvio a aparecer el mismo sintoma en .cwt-h2: traia
`color:var(--cwt-cream)` SIN blindar, el titulo del destacado
caia al color global de Elementor (tinta oscura) y quedaba
invisible sobre el fondo petroleo.
LA REGLA, definitiva: toda clase del kit que declare color lo
declara con !important. Sin excepciones y sin filtros previos.
Elementor escribe los valores del panel con el ID del elemento
y gana por especificidad; el kit solo compite si blinda.
LECCION DE METODO, que es la que de verdad importa: cuando un
sintoma reaparece por tercera vez, el problema no es el
sintoma — es que el barrido anterior fue parcial. Auditar el
universo completo antes de parchear, no la muestra que
confirma la hipotesis.
============================================================== */
/* ==============================================================
v6.4 · LA REGLA DE LOS TRES SELECTORES — 8-ago-2026
Segunda mitad de la causa que abrio la v6.3. El blindaje de la
v6.3 era correcto pero apuntaba a .elementor-kit-45es que NO alcanzan al
texto: un widget Encabezado renderiza
y la regla solo cubria la raiz y el
. El h2 se pintaba con la
tipografia global del tema y con el color global Primario
(#0A2835 = el petroleo del fondo) -> texto invisible y gigante.
MEDIDO en consola: la raiz tenia color rgb(45,106,45) y 10px
correctos mientras la caja media 245x211. El CSS aplicaba; no
llegaba al hijo.
TODA clase del kit que vista texto necesita LOS TRES:
.clase · .clase .elementor-heading-title · .clase p
Dos de tres es el bug que aparece meses despues y en otra
seccion. Corregidas: cwt-sci, cwt-crumb, cwt-fbar, cwt-fcoords,
cwt-lead, cwt-stars.
============================================================== */
/* ==============================================================
v6.3 · BLINDAJE DE COLOR Y TIPOGRAFIA — 8-ago-2026
CAUSA RAIZ, no un parche. Diez clases del kit llevaban
`font-family:...!important` pero dejaban color, font-size,
letter-spacing, text-transform, line-height y font-weight SIN
blindar. Elementor escribe los valores del panel con el ID del
elemento, que gana por especificidad. Y como el color global
Primario del sitio es #0A2835 (el mismo petroleo del fondo),
TODO Encabezado nuevo nacia invisible: petroleo sobre petroleo.
No es que el panel "no dejara vaciar el campo" — es que al
vaciarlo caia al color global.
Sintoma que costo horas: cwt-sci en las celdas de Field notes.
Habria vuelto igual en cwt-tmeta, cwt-scitag, cwt-crumb,
cwt-fbar, cwt-fcoords, cwt-badge-pop, cwt-chipbar, cwt-faq y
cwt-coordtag — o sea, en testimonios, footer y badges.
REGLA QUE DEJA: si una clase del kit blinda la fuente, blinda
TODAS sus propiedades tipograficas. A medias es peor que nada,
porque el sintoma aparece meses despues y en otra seccion.
============================================================== */
/* ==============================================================
26 · PILDORA DE COORDENADAS — v5.7 · FUENTE UNICA
Reemplaza TODO lo anterior sobre .cwt-coords. Antes vivia en
tres lugares a la vez y por eso siete versiones no la cerraron.
EL ERROR DE FONDO: las reglas dibujaban la capsula sobre el
(el hijo) mientras la clase esta en el WIDGET (el div).
Y la v5.5 empeoro: aplico la capsula a los DOS a la vez, o sea
dos capsulas anidadas. Por eso el borde cortaba en `W —` y el
naranja quedaba afuera.
LA REGLA: la capsula la dibuja EL ELEMENTO QUE LLEVA LA CLASE.
Todo lo de adentro es texto en linea, sin caja propia.
============================================================== */
/* --- 26.1 · La capsula: una sola, sobre la raiz.
★ v5.9 · VIDRIO UNIFICADO: mismos valores que el badge
calibrado en banco de pruebas (v5.0): fondo 0.25 ·
blur 2px · borde 0.30 · brillo inset superior (el canto
de vidrio — la propiedad que hace el efecto). Antes:
0.35 / blur 6 / sin brillo = capsula lechosa, no vidrio. --- */
.cwt-coords{
display:inline-block!important;
font-family:'JetBrains Mono',monospace!important;
font-size:11px!important;
letter-spacing:0.24em!important;
line-height:1.5em!important;
text-transform:uppercase!important;
color:var(--cwt-cream)!important;
white-space:nowrap!important;
padding:8px 16px!important;
border:1px solid rgba(242,245,246,0.30)!important;
border-radius:24px!important;
background:rgba(6,26,36,0.25)!important;
backdrop-filter:blur(2px)!important;
-webkit-backdrop-filter:blur(2px)!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,0.22)!important;
margin:0!important;
width:auto!important;
}
/* --- 26.2 · Lo de adentro NO tiene caja. Sin esto el
vuelve
a dibujar su propia capsula encima. --- */
.cwt-coords p,
.cwt-coords .elementor-heading-title,
.cwt-coords .elementor-widget-container{
display:inline!important;
background:none!important;
border:none!important;
border-radius:0!important;
padding:0!important;
margin:0!important;
backdrop-filter:none!important;
-webkit-backdrop-filter:none!important;
font:inherit!important;
letter-spacing:inherit!important;
color:inherit!important;
line-height:inherit!important;
white-space:inherit!important;
}
/* --- 26.3 · El lugar, en naranja. Sin margen negativo: al no
haber flex, el espacio del contenido rinde solo. --- */
.cwt-coords b{
display:inline!important;
color:var(--cwt-orange)!important;
font-weight:500!important;
background:none!important;
padding:0!important;
margin:0!important;
}
/* --- 26.4 · MOVIL: el contrato de telefono, en la fuente unica.
Antes vivia en el bloque movil v4.7 y estaba MUERTO: mismo
.elementor-kit-45 y mismo !important que la 26.1, pero la 26.1 queda
despues en el archivo -> gana el ultimo. Por eso el telefono
rendia 11px + nowrap y la pildora se cortaba a la derecha.
Aca, al final de la hoja, gana sin pelear.
Produce: 9.5px · tracking 0.16em · relleno 7/14 · lh 1.9em ·
white-space normal para que PARTA en dos lineas. Los hijos
heredan todo via la 26.2 (inherit). --- */
@media(max-width:767px){
.cwt-coords{
font-size:9.5px!important;
letter-spacing:0.16em!important;
padding:7px 14px!important;
line-height:1.9em!important;
white-space:normal!important;
}
}
/* ==============================================================
27 · HUERFANOS DE FUENTE — v6.0
Con la carga de Google Fonts de Elementor apagada, solo
existen las tres familias del sistema (Fraunces, DM Sans,
JetBrains Mono). Estos elementos usaban familias del TEMA y
caerian a fuente de sistema. Se traen al sistema de diseno.
============================================================== */
/* --- 27.1 · Skip-link de accesibilidad de Hello Elementor
("Ir al contenido"). Invisible salvo con tabulador. --- */
.skip-link,
.screen-reader-text{
font-family:'DM Sans',sans-serif!important;
}
/* --- 27.2 · Botones de WooCommerce ("Book Now" del single de
tour). Usaban Arima: fuera de la identidad. Vuelven a
DM Sans, que es la familia de interfaz del sistema. --- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.added_to_cart,
a.button.product_type_simple,
a.button.product_type_variable{
font-family:'DM Sans',sans-serif!important;
}
/* ==============================================================
28 · BENEFITS (Why with Jairo · 02) — v6.1
============================================================== */
/* --- 28.1 · Titulo de tarjeta. Tres .elementor-kit-45es por la regla del
marcado optimizado de Elementor 3.34. --- */
.cwt-btitle,
.cwt-btitle .elementor-heading-title,
.cwt-btitle p{
font-family:'Fraunces',serif!important;
font-size:26px!important;
font-weight:400!important;
line-height:1.25em!important;
letter-spacing:0!important;
text-transform:none!important;
color:var(--cwt-cream)!important;
}
.cwt-btitle{margin:14px 0 0!important}
/* --- 28.2 · Tarjeta: aire interno y hover. --- */
.cwt-bcard{
background:var(--cwt-deep)!important;
transition:background .4s var(--cwt-ease)!important;
}
.cwt-bcard:hover{background:var(--cwt-petrol)!important}
.cwt-bcard>.e-con-inner,
.cwt-bcard{padding:40px 34px 44px!important}
/* --- 28.3 · Flecha en circulo, arriba a la derecha. Gira 90deg
al pasar por la tarjeta (no por el icono: el area de hover
es la tarjeta entera).
★ v6.2 · LAS 3 FLECHAS SALIAN A LA IZQUIERDA. El display:grid
de abajo centra el icono DENTRO del circulo, que es correcto —
pero el circulo vive en un widget que ocupa todo el ancho de
la tarjeta, y ahi la alineacion del panel no llegaba. Se
empuja desde los envoltorios, cubriendo el marcado con y sin
.elementor-widget-container (Elementor 3.34 lo elimina). --- */
/* ★ v6.5 · MEDIDO EN CONSOLA. El empuje por flex de la v6.2 no
servia: la flecha ocupaba su propia fila de 52px y la etiqueta
caia debajo (y:927 vs y:999). La vara las pone a la MISMA
altura porque la flecha esta posicionada, no empujada.
Probado en vivo: con esto ambas dan y:927. */
.cwt-bcard{position:relative!important}
.cwt-barrow{
position:absolute!important;
top:40px!important;right:34px!important;
width:auto!important;display:block!important;
justify-content:initial!important;z-index:2!important;
}
@media(max-width:900px){
.cwt-barrow{top:32px!important;right:24px!important}
}
.cwt-barrow .elementor-icon{
width:34px;height:34px;border-radius:50%;
border:1px solid var(--cwt-line);
display:grid;place-items:center;
color:var(--cwt-orange)!important;
transition:border-color .4s var(--cwt-ease),transform .4s var(--cwt-ease);
}
.cwt-bcard:hover .cwt-barrow .elementor-icon{
border-color:var(--cwt-orange);
transform:rotate(90deg);
}
/* ==============================================================
29 · ABOUT-JAIRO (Your guide · 05) — v6.1
============================================================== */
/* --- 29.1 / 29.2 / 29.3 · PURGADAS EN v6.2 --------------------
cwt-statrow, cwt-stat-num y cwt-stat-lbl vestian Encabezados.
El 8-ago se reemplazaron por widgets Contador y la seccion 6
(.cwt-stats) los cubre entera. Se les paso el margin-top:48px
que traia cwt-statrow, que era lo unico que quedaba vivo.
No volver a crearlas: dos fuentes para lo mismo es el bug
que costo la pildora de coordenadas siete versiones. --- */
/* --- 29.4 · La foto: radio y borde como la vara. --- */
.cwt-jphoto,
.cwt-jphoto img{
border-radius:10px!important;
overflow:hidden!important;
}
.cwt-jphoto img{border:1px solid var(--cwt-line)!important}
/* --- 29.5 · Etiqueta sobre la foto (abajo-izquierda). El
contenedor de la foto necesita position:relative — se lo
da esta misma regla. --- */
.cwt-jphoto{position:relative!important}
.cwt-jtag,
.cwt-jtag .elementor-heading-title,
.cwt-jtag p{
font-family:'JetBrains Mono',monospace!important;
font-size:10px!important;
letter-spacing:0.18em!important;
text-transform:uppercase!important;
color:var(--cwt-cream)!important;
}
.cwt-jtag{
position:absolute!important;
bottom:20px!important;left:20px!important;z-index:2!important;
padding:8px 14px!important;
border-radius:4px!important;
margin:0!important;
/* v6.2 · vidrio unificado al estandar v5.9 */
background:rgba(6,26,36,0.25)!important;
border:1px solid rgba(242,245,246,0.30)!important;
backdrop-filter:blur(2px)!important;
-webkit-backdrop-filter:blur(2px)!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,0.22)!important;
}
/* ==============================================================
30 · FIELD NOTES / THESIS (01) — v6.1
La seccion no existe todavia en el Home. CSS listo.
cwt-bio (rejilla de 4) y cwt-sci ya viven en la seccion 6.
============================================================== */
/* --- 30.1 · La cita de National Geographic. --- */
.cwt-quote,
.cwt-quote .elementor-heading-title,
.cwt-quote p{
font-family:'Fraunces',serif!important;
font-weight:300!important;
font-style:italic!important;
font-size:clamp(30px,4vw,52px)!important;
line-height:1.22em!important;
letter-spacing:0!important;
text-transform:none!important;
color:var(--cwt-cream)!important;
}
.cwt-quote{max-width:22ch!important;margin:34px 0 0!important}
/* el fragmento naranja: dentro de la cita */
.cwt-quote strong,.cwt-quote b{
font-weight:500!important;
font-style:normal!important;
color:var(--cwt-orange)!important;
}
/* --- 30.2 · Pie de cita. --- */
.cwt-cite,
.cwt-cite .elementor-heading-title,
.cwt-cite p{
font-family:'JetBrains Mono',monospace!important;
font-size:11px!important;
letter-spacing:0.2em!important;
text-transform:uppercase!important;
color:var(--cwt-dim)!important;
}
.cwt-cite{margin:26px 0 0!important}
/* --- 30.3 · Watermark "Osa". Se asigna a la SECCION. El texto
se escribe en el atributo data-mark del contenedor.
Alternativa sin atributos: un Encabezado con cwt-markt. --- */
.cwt-mark{position:relative!important;overflow:hidden!important}
.cwt-markt,
.cwt-markt .elementor-heading-title,
.cwt-markt p{
font-family:'Fraunces',serif!important;
font-style:italic!important;
font-size:280px!important;
line-height:1!important;
color:rgba(242,245,246,0.028)!important;
}
.cwt-markt{
position:absolute!important;
right:-60px!important;top:-40px!important;
pointer-events:none!important;user-select:none!important;
margin:0!important;z-index:0!important;
}
@media(max-width:900px){
.cwt-markt{font-size:160px!important;right:-30px!important}
.cwt-bcard,.cwt-bcard>.e-con-inner{padding:32px 24px 34px!important}
}
/* ==============================================================
v6.8 · CIERRE DEL HOME — 18-ago-2026
Va DESPUES de la v6.7, antes del comentario de cierre de hoja.
Seis entradas. Cinco salen de medir en consola el 18-ago sobre
el Home publicado; una corrige un conflicto interno de la hoja.
NO ENTRA EN ESTA VERSION:
· El rail de senderos. Sigue sin medir porque no se identifico
su contenedor en el arbol. Queda para la v6.9.
· La pildora del hero en movil. Su bloque de la seccion 26 ya
la hace partir en dos lineas a proposito. Lo que se monta
encima es el ENCABEZADO, y eso es la plantilla del Theme
Builder, no esta hoja.
· La flecha del boton de tarjeta en movil. La excepcion 23.11
ya la fuerza visible a proposito. No era un hover pegado.
PIDE DOS CAMBIOS DE PANEL (sin ellos, 28.1 y 28.5 no aplican):
· card-titulo -> clase cwt-ctitle · etiqueta H2 a H3
· feat-info -> clase cwt-featinfo
============================================================== */
/* --- 28.1 · TITULO DE LA TARJETA DEL BUCLE (cwt-ctitle).
MEDIDO 18-ago: 316x52 · Fraunces 20px · peso 700 · lh 26px
(1.3em) · color rgb(23,36,43) = --cwt-ink.
El COLOR ya venia del kit (.cwt-card .elementor-heading-title
de la seccion 8). El tamano y el peso salian del panel del
widget, sin blindar: si alguien vacia esos campos, el titulo
cae a la tipografia global.
⚠️ NO usar cwt-ttitle aca. Esa es del hero del single tour
(clamp 38-68px, max 18ch) y dentro de una tarjeta de 380px
revienta la caja. Son escalas distintas a proposito.
⚠️ El widget renderiza . Pasarlo a H3 en el panel: seis
tarjetas dan seis H2 que le compiten al titulo de seccion.
La clase cubre las dos etiquetas para que el cambio de panel
no rompa nada. --- */
.cwt-ctitle,
.cwt-ctitle .elementor-heading-title,
.cwt-ctitle h2,.cwt-ctitle h3,.cwt-ctitle p{
font-family:'Fraunces',serif!important;
font-size:20px!important;
font-weight:700!important;
line-height:1.3em!important;
letter-spacing:0!important;
color:var(--cwt-ink)!important;
margin:0!important;
}
/* --- 28.2 · PARRAFO DEL HERO (cwt-hlead).
MEDIDO 18-ago: 581x77 · DM Sans 16px · peso 600 · lh 25.6px
(1.6em) · crema · ancho 581px, que es exactamente 52ch en
DM Sans a 16px (la cifra de esta familia mide ~11.2px).
O sea que el max-width de la 25.3 SI estaba funcionando; lo
demas venia del panel sin blindar.
★ UNICO CAMBIO DE ASPECTO DE LA v6.8: el peso baja de 600 a
400. 600 es peso de subtitulo y la vara lee ese parrafo
liviano. Si se quiere volver atras, es este numero.
La 25.3 (.cwt-hero p{max-width:52ch}) se deja donde esta: no
estorba a la pildora porque la 26.2 la pone en display:inline
y max-width no aplica a elementos en linea. Se comprobo. --- */
.cwt-hlead,
.cwt-hlead p,
.cwt-hlead .elementor-heading-title{
font-family:'DM Sans',sans-serif!important;
font-size:16px!important;
font-weight:400!important;
line-height:1.6em!important;
letter-spacing:0!important;
color:var(--cwt-cream)!important;
max-width:52ch!important;
}
/* --- 28.3 · LA FILA "FROM" DEL DESTACADO, EN NARANJA.
La seccion 9 ya tiene el precio caliente, pero SOLO para la
forma de lista de definicion (dd.hot). El destacado del Home
usa la variante de lista con vinetas, que no tenia como
distinguir la ultima fila. La vara pone ese valor en Fraunces
22px naranja.
COMO FUNCIONA: la regla viste el
entero, y el valor es
un nodo de texto suelto que hereda de ahi. La ETIQUETA sigue
en mono gris porque `.cwt-spec li strong` es una regla
declarada sobre el hijo, y toda regla declarada le gana a un
valor heredado — aunque el padre lleve !important. La
importancia no se hereda.
★ CORREGIDO EN v7.0. Estaba escrita como `.cwt-spec li:
last-child` a secas, y cwt-spec NO vive solo en el Home:
tambien es la ficha del panel de reserva del Single Tour.
Ahi la ultima fila es MEETING POINT, que salia en Fraunces
22px naranja y encimada. Verificado en consola el 18-ago.
-> se acota al destacado del Home.
⚠️ Depende de que FROM sea la ULTIMA vineta de la lista. Si
algun dia se agrega una fila despues, mueve el naranja. --- */
.cwt-featrow .cwt-spec li:last-child,
.cwt-featinfo .cwt-spec li:last-child{
font-family:'Fraunces',serif!important;
font-size:22px!important;
font-weight:400!important;
color:var(--cwt-orange)!important;
}
/* --- 28.4 · cwt-coordtag EN MOVIL. El rotulo sobre foto se salia
por el canto derecho de la imagen.
CAUSA: la regla de la seccion 8 declara max-width:calc(100%
- 40px) Y white-space:nowrap a la vez. La caja respeta el
ancho, pero el texto no puede partir, asi que se desborda
por fuera de su propia caja. Dos reglas que se contradicen.
No es que el ancla falle: la caja arranca a 20px del canto
izquierdo de la foto, o sea que el :has() de la 8 esta
enganchando bien.
-> en telefono se deja partir, se baja la escala y se pegan
los margenes. "SIRENA RANGER STATION · 08°28'N 83°35'W"
entra en dos lineas sin tocar el borde. --- */
@media(max-width:767px){
.cwt-coordtag{
white-space:normal!important;
font-size:9px!important;
letter-spacing:0.12em!important;
line-height:1.7em!important;
padding:6px 12px!important;
left:12px!important;
bottom:12px!important;
max-width:calc(100% - 24px)!important;
}
.cwt-coordtag p,
.cwt-coordtag .elementor-heading-title{
white-space:normal!important;
}
}
/* --- 28.5 · ORDEN DEL DESTACADO EN MOVIL.
LO CAUSAMOS EL 18-ago: al mover feat-rotulo y feat-titulo
DENTRO de feat-info (para que en escritorio la columna
derecha llene el alto de la foto), quedaron detras de
feat-foto en el orden del documento. En dos columnas no se
nota; al apilar en telefono, la foto pasa a ir primero y el
titulo despues. En escritorio el cambio fue correcto y se
queda.
COMO FUNCIONA: display:contents disuelve a feat-info como
caja y sus hijos pasan a ser elementos directos de la
columna. Ahi se pueden intercalar con la foto por `order`.
Resultado: rotulo · titulo · FOTO · parrafo · ficha · boton.
⚠️ PIDE LA CLASE cwt-featinfo EN feat-info. Sin ella esta
regla no tiene a que agarrarse y el bloque no hace nada.
⚠️ Al disolver feat-info se pierde SU hueco interno y manda
el de cwt-featrow, que en movil son 50px. Se baja a 22px
para que las seis piezas respiren parejo.
⚠️ nth-child cuenta sobre feat-info, no sobre la columna
resultante. Si se agrega un widget antes del rotulo, hay
que correr los numeros. --
★ v6.9 · MEDIDO 18-ago, ancho 424: el .elementor-kit-45 era
`.cwt-featrow > .cwt-featimg` y NO alcanzaba. Elementor
interpone un .e-con-inner cuando el contenedor esta en
ancho "Caja", asi que featrow tiene UN solo hijo directo.
La foto se quedaba en order 0 (primera) mientras rotulo y
titulo si recibian 1 y 2, porque esos cuelgan de
.cwt-featinfo y ahi no hay wrapper de por medio.
-> descendente en vez de hijo directo. Los hermanos reales
son todos hijos de .e-con-inner tras el display:contents.
⚠️ HALLAZGO MAYOR, NO CORREGIDO AQUI: por la misma causa,
el bloque de escritorio de cwt-featrow (seccion v6.6: gap
80px, align-items center, columnas 1.05/1) TAMPOCO aplica
nunca — todos sus .elementor-kit-45es son de hijo directo. Corregirlo
cambia el aspecto del escritorio, asi que se decide aparte. --- */
@media(max-width:960px){
.cwt-featrow{gap:22px!important}
.cwt-featinfo{display:contents!important}
.cwt-featinfo>*:nth-child(1){order:1!important} /* rotulo */
.cwt-featinfo>*:nth-child(2){order:2!important} /* titulo */
.cwt-featrow .cwt-featimg{order:3!important} /* foto */
.cwt-featinfo>*:nth-child(n+3){order:4!important} /* el resto*/
.cwt-featinfo>*:nth-child(2){margin-bottom:4px!important}
}
/* --- 28.6 · EL PRECIO DE LA TARJETA, EN MOVIL.
Remate de la excepcion 23.11, que apago los efectos de
cursor en telefono pero dejo afuera el viraje del precio a
tierra (23.9). En Android el hover se queda pegado al tocar,
asi que una tarjeta puede quedarse con el precio en cafe
hasta que se toque otra cosa. --- */
@media(max-width:767px){
.cwt-card:hover .cwt-price p,
.cwt-card:hover .cwt-price .elementor-heading-title{
color:var(--cwt-ink)!important;
}
}
/* ============================ fin v6.8 ======================== */
/* ==============================================================
29 · FICHA DEL PANEL (cwt-spec) — REPARTO EN REJILLA
v7.0 · 18-ago-2026 · Todo medido en consola sobre el Single
Tour publicado. Ninguna cifra heredada ni supuesta.
EL SINTOMA: la fila MEETING POINT se encimaba consigo misma.
TRES CAUSAS, EN ORDEN DE DESCUBRIMIENTO:
1. El VALOR de cada fila no es un elemento. La receta del kit
es `Etiqueta valor`, asi que el
valor es un nodo de texto suelto. flex-wrap no lo mueve
porque no hay caja que envolver: se desborda y se encima.
-> La rejilla SI le fabrica una celda anonima. Por eso el
reparto pasa de flex a grid de dos columnas.
2. Un intento intermedio uso `inherit` para desarmar el naranja
de la 28.3. Fue un error: heredaba tierra #6B3D2E y 16px de
un ancestro, en vez de los valores del kit. LECCION: para
desarmar una regla se escribe el valor correcto, nunca
`inherit` — no se sabe de donde hereda.
3. La 28.3 no estaba acotada (ver arriba).
⚠️ La celda del valor es ANONIMA: ningun .elementor-kit-45 la alcanza.
Por eso el `text-align:right` va en el y se devuelve a la
izquierda en el , que si es un elemento real.
⚠️ ESTA SECCION VA AL FINAL A PROPOSITO. Habia cinco reglas
tocando .cwt-spec li repartidas por la hoja; esta las cierra
por orden de cascada. Antes de agregar una sexta, revisar si
se puede consolidar aca.
============================================================== */
.cwt-spec li{
display:grid!important;
grid-template-columns:auto 1fr!important;
column-gap:14px!important;
align-items:baseline!important;
text-align:right!important;
font-family:'DM Sans',sans-serif!important;
font-size:15px!important;
font-weight:500!important;
line-height:1.5em!important;
color:var(--cwt-cream)!important;
}
.cwt-spec li strong{
text-align:left!important;
white-space:nowrap!important;
font-family:'JetBrains Mono',monospace!important;
font-size:10.5px!important;
letter-spacing:0.2em!important;
color:var(--cwt-dim)!important;
line-height:1.5em!important;
}
/* ============ fin de la hoja maestra v7.0 ============ */
/* ==============================================================
KEYFRAME MÓVIL — va FUERA del @media a propósito.
Las animaciones se declaran a nivel global aunque solo se usen
dentro de un media query.
⚠️ Los dos extremos son del MISMO tipo de valor. Animar de
`118% auto` a `cover` no funciona: el navegador no interpola
entre un par de medidas y una palabra clave, y descarta el
keyframe entero sin avisar.
============================================================== */
@keyframes cwtKBmob{
from{background-size:auto 109%}
to{background-size:auto 100%}
}/* End custom CSS */