/* ==========================================================================
   CSD VIAJES EXPERIENCE -- DESIGN SYSTEM V2 (GLOBAL, UNICA FUENTE DE VERDAD)
   Sustituye la paleta V1 (teal/#102A43/#B58B2A) en todo el sitio.
   Ver migration-tools/design-system/CSD_DESIGN_SYSTEM_V2.md para el mapeo
   V1 -> V2 completo y la justificacion de cada decision.
   ========================================================================== */

:root {
  /* --- Color: paleta V2 (oficial, sustituye V1) --- */
  --csd-green: #0B6B4F;        /* franja superior, confianza, microelementos corporativos */
  --csd-navy: #0E3A5F;         /* titulos, navegacion, headings, footer, secciones premium */
  --csd-gold: #C9A227;         /* CTA, iconos, lineas, detalles, hover, destacados */
  --csd-gold-soft: #d8b646;    /* hover del dorado (derivado, +12% luminosidad) */
  --csd-white: #FAFAF8;        /* fondo principal */
  --csd-light: #F0F2F4;        /* secciones alternas, fondos suaves, cards secundarias */
  --csd-text: #1A1A1A;         /* texto de cuerpo */
  --csd-muted: #5A6168;        /* microtexto, metadatos */
  --csd-border: #e4e6e8;       /* bordes de tarjeta (derivado de --csd-light) */
  --csd-error: #B3261E;        /* heredado de V1, sin conflicto con V2 */

  /* --- Tipografia (heredada de V1, sin cambios -- no hay conflicto) --- */
  --csd-serif: 'Playfair Display', Georgia, serif;
  --csd-sans: 'Inter', -apple-system, 'Segoe UI', sans-serif;

  /* --- Espaciado (heredado de V1, escala ya validada) --- */
  --csd-space-xs: 8px;
  --csd-space-s: 18px;
  --csd-space-m: 24px;
  --csd-space-l: 40px;
  --csd-space-xl: 56px;
  --csd-space-2xl: 88px;
  --csd-space-3xl: 104px;
  --csd-space-3xl-mobile: 72px;

  /* --- Contenedores (heredado de V1) --- */
  --csd-content-max: 1240px;
  --csd-editorial-max: 640px;
  --csd-wide-max: 900px;
  --csd-pad-desktop: 32px;
  --csd-pad-mobile: 20px;

  /* --- Radios y sombras (heredado de V1) --- */
  --csd-radius-card: 2px;
  --csd-radius-logo: 14px;
  --csd-shadow-card: 0 2px 14px rgba(0,0,0,.10);
}

/* Reset minimo de utilidad -- no interfiere con Astra/Elementor */
.csdx-v2 { color: var(--csd-text); font-family: var(--csd-sans); }
.csdx-v2 h1, .csdx-v2 h2, .csdx-v2 h3, .csdx-v2 h4 { font-family: var(--csd-serif); color: var(--csd-navy); }

/* --- Top bar verde institucional (seccion 17) --- */
.csdx-v2-topbar {
  background: var(--csd-green);
  color: #FFFFFF;
  font-family: var(--csd-sans);
  font-size: 13px;
  padding: 8px var(--csd-pad-desktop);
}
.csdx-v2-topbar a { color: #FFFFFF; text-decoration: none; }

/* --- Header blanco mate (seccion 18) --- */
.csdx-v2-header { background: var(--csd-white); }
.csdx-v2-header nav a { color: var(--csd-navy); font-family: var(--csd-sans); font-weight: 600; }
.csdx-v2-header nav a:hover,
.csdx-v2-header nav a.active { color: var(--csd-gold); }

/* --- Botones (seccion 29) --- */
.csdx-v2-btn-primary {
  background: var(--csd-gold);
  color: var(--csd-navy);
  font-family: var(--csd-sans);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 14px 32px;
  border-radius: var(--csd-radius-card);
  display: inline-block;
  text-decoration: none;
  transition: background .2s ease;
}
.csdx-v2-btn-primary:hover { background: var(--csd-gold-soft); }

.csdx-v2-btn-secondary {
  background: transparent;
  color: var(--csd-navy);
  border: 1px solid var(--csd-navy);
  font-family: var(--csd-sans);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 13px 31px;
  border-radius: var(--csd-radius-card);
  display: inline-block;
  text-decoration: none;
}

.csdx-v2-btn-tertiary {
  color: var(--csd-gold);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--csd-gold);
  padding-bottom: 2px;
}

/* --- Footer navy profundo (seccion 50) --- */
.csdx-v2-footer {
  background: var(--csd-navy);
  color: var(--csd-light);
}
.csdx-v2-footer a { color: var(--csd-light); }
.csdx-v2-footer .csdx-v2-footer-accent { color: var(--csd-gold); }

/* --- Sistema de cards (seccion 28) --- */
.csdx-v2-card {
  background: var(--csd-white);
  border: 1px solid var(--csd-border);
  border-radius: var(--csd-radius-card);
  box-shadow: var(--csd-shadow-card);
  overflow: hidden;
}
.csdx-v2-card h3 { font-size: 16px; margin: var(--csd-space-s) 0 var(--csd-space-xs); }
.csdx-v2-card .csdx-v2-card-meta { color: var(--csd-muted); font-size: 13px; }

/* --- Secciones alternas (fondo gris claro) --- */
.csdx-v2-section-alt { background: var(--csd-light); }

/* --- Pagina simple: hero editorial corto + contenido (Nosotros/Contacto/Disena tu viaje) --- */
.csdv2-page {
  font-family: var(--csd-sans);
  color: var(--csd-text);
}
.csdv2-page-hero {
  background: var(--csd-navy);
  color: #FFFFFF;
  text-align: center;
  padding: 88px var(--csd-pad-desktop) 64px;
}
.csdv2-page-hero .eyebrow {
  font-size: 13px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--csd-gold); font-weight: 600; margin: 0 0 16px;
}
.csdv2-page-hero h1 {
  font-family: var(--csd-serif); font-weight: 700; color: #FFFFFF;
  font-size: clamp(32px, 4vw, 48px); margin: 0 0 16px;
}
.csdv2-page-hero p {
  max-width: var(--csd-editorial-max); margin: 0 auto; font-size: 17px;
  color: rgba(255,255,255,.82); line-height: 1.6;
}
.csdv2-page-content {
  max-width: var(--csd-editorial-max);
  margin: 0 auto;
  padding: var(--csd-space-2xl) var(--csd-pad-desktop);
}
.csdv2-page-content h2 { font-family: var(--csd-serif); color: var(--csd-navy); font-size: 28px; }
.csdv2-page-content p { font-size: 17px; line-height: 1.7; color: var(--csd-text); }

/* --- Formulario (Diseña tu viaje / Contacto) --- */
.csdv2-page-content form.wpcf7-form { max-width: 100%; }
.csdv2-page-content .wpcf7-form p { margin-bottom: 18px; }
.csdv2-page-content .wpcf7-form input[type="text"],
.csdv2-page-content .wpcf7-form input[type="email"],
.csdv2-page-content .wpcf7-form input[type="tel"],
.csdv2-page-content .wpcf7-form input[type="number"],
.csdv2-page-content .wpcf7-form input[type="date"],
.csdv2-page-content .wpcf7-form textarea {
  width: 100%; border: 1px solid var(--csd-border); border-radius: 2px;
  padding: 12px 14px; font-family: var(--csd-sans); font-size: 15px;
  color: var(--csd-text); background: var(--csd-white);
}
.csdv2-page-content .wpcf7-form input:focus,
.csdv2-page-content .wpcf7-form textarea:focus {
  outline: none; border-color: var(--csd-gold);
}
.csdv2-page-content .wpcf7-form input[type="submit"] {
  background: var(--csd-gold); color: var(--csd-navy); border: none;
  font-weight: 600; font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  padding: 14px 36px; border-radius: 2px; cursor: pointer;
}
.csdv2-page-content .wpcf7-form input[type="submit"]:hover { background: var(--csd-gold-soft); }
.csdv2-page-content .wpcf7-form label { font-size: 13px; color: var(--csd-muted); }

/* --- Responsive: breakpoints heredados de V1 (1024px, 760px) --- */
@media (max-width: 1024px) {
  :root { --csd-pad-desktop: 24px; }
}
@media (max-width: 760px) {
  .csdx-v2-topbar, .csdx-v2-header { padding-left: var(--csd-pad-mobile); padding-right: var(--csd-pad-mobile); }
}