/* Rebel Nomada — sistema visual v1.0 (ver CODICE_VISUAL_REBEL_NOMADA_v1.0.docx) */

/* Tipografia de marca: Cinzel (titulos), Bebas Neue (subtitulos), Cormorant Garamond (cuerpo/contenido) */
/* Creator Genius queda cargada pero sin uso activo, por si se retoma en el futuro. */
@font-face{ font-family:'Cinzel'; src:url('../fonts/Cinzel-Regular.otf') format('opentype'); font-weight:400; font-style:normal; font-display:swap;}
@font-face{ font-family:'Cinzel'; src:url('../fonts/Cinzel-Bold.otf') format('opentype'); font-weight:700; font-style:normal; font-display:swap;}
@font-face{ font-family:'Cinzel'; src:url('../fonts/Cinzel-Black.otf') format('opentype'); font-weight:900; font-style:normal; font-display:swap;}
@font-face{ font-family:'Bebas Neue'; src:url('../fonts/BebasNeue-Regular.woff2') format('woff2'), url('../fonts/BebasNeue-Regular.woff') format('woff'), url('../fonts/BebasNeue-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap;}
@font-face{ font-family:'Creator Genius'; src:url('../fonts/CreatorGenius-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap;}
@font-face{ font-family:'Cormorant Garamond'; src:url('../fonts/CormorantGaramond-VariableFont_wght.ttf') format('truetype'); font-weight:300 700; font-style:normal; font-display:swap;}
@font-face{ font-family:'Cormorant Garamond'; src:url('../fonts/CormorantGaramond-Italic-VariableFont_wght.ttf') format('truetype'); font-weight:300 700; font-style:italic; font-display:swap;}

:root{
  --negro-volcanico: #1B1A17;
  --hueso-antiguo: #F2EBDD;
  --arena-desierto: #D7B98C;
  --piedra-granitica: #8B867C;
  --cobre-envejecido: #8B5E3C;
  --verde-gobernadora: #5F6A45;

  --bg: var(--hueso-antiguo);
  --surface: #EAE1CB;
  --text: var(--negro-volcanico);
  --text-muted: #3E3A33;
  --accent: var(--cobre-envejecido);
  --accent-dark: #6E4930;
  --line: rgba(27,26,23,0.16);
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  background: var(--bg);
  color: var(--text);
  font-family: 'Cormorant Garamond', 'Spectral', Georgia, serif;
  line-height: 1.7;
}
h1{
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.5px;
}
h2,h3{
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.mono, .card-city, .level, .blog-tag, .blog-meta, .price, .footer-bottom, footer h4, .breadcrumb, .trust-logos, .trust-badge, .testi-name, .form-field label{
  font-family: 'IBM Plex Mono', monospace;
}
nav.main-nav, .btn, .eyebrow, .pill, .value-num{
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 1.5px;
}
/* "Rebel Nomada" del header/footer con la misma fuente del eslogan
   "No seguimos caminos." (Cinzel bold, igual que los h1) */
.logo-text{ font-family:'Cinzel', Georgia, serif; font-weight:700; letter-spacing:0.5px;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{max-width:1180px; margin:0 auto; padding:0 24px;}
.btn{
  display:inline-block;
  background: var(--accent);
  color: var(--hueso-antiguo);
  font-weight:500;
  padding: 13px 26px;
  border-radius: 2px;
  font-size:13px;
  letter-spacing:1px;
  text-transform:uppercase;
  border:1px solid var(--accent);
  cursor:pointer;
  transition: background .15s ease, color .15s ease;
}
.btn:hover{ background: var(--accent-dark); border-color:var(--accent-dark);}
.btn-ghost{
  background:transparent;
  border:1px solid var(--piedra-granitica);
  color: var(--text);
}
.btn-ghost:hover{ border-color: var(--accent); color: var(--accent);}
.btn-sm{ padding:8px 16px; font-size:11px;}

/* Header */
header{
  position:sticky; top:0; z-index:50;
  background: var(--hueso-antiguo);
  border-bottom:1px solid var(--line);
}
header .wrap{ display:flex; align-items:center; justify-content:space-between; height:80px;}
.logo{ font-family:'Cinzel'; font-weight:600; font-size:22px; letter-spacing:0.5px;}
.logo span{color:var(--accent); font-style:italic;}
.logo-mark{ display:flex; align-items:center; gap:12px;}
.logo-mark img{ height:45px; width:auto;}
footer .logo-mark img{ height:64px;}
nav.main-nav{ display:flex; gap:30px; font-size:12px; font-weight:500; letter-spacing:1px; text-transform:uppercase;}
nav.main-nav a:hover, nav.main-nav a.active{color:var(--accent);}
.header-actions{ display:flex; align-items:center; gap:16px;}
.header-actions .btn{ padding:10px 20px; font-size:11px;}

/* Menu movil */
.menu-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:38px; height:38px; background:none; border:1px solid var(--piedra-granitica);
  border-radius:2px; cursor:pointer; padding:0 8px;
}
.menu-toggle span{ display:block; height:2px; width:100%; background:var(--text);}
.menu-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg);}
.menu-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0;}
.menu-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg);}

.mobile-menu{
  display:none; flex-direction:column; gap:2px;
  background:var(--bg); border-top:1px solid var(--line);
  max-height:0; overflow:hidden; transition:max-height .25s ease;
}
.mobile-menu.open{ max-height:400px;}
.mobile-menu a{
  padding:16px 24px; border-bottom:1px solid var(--line);
  font-family:'Bebas Neue'; letter-spacing:1.5px; font-size:16px;
}
.mobile-menu a.active{ color:var(--accent);}
.mobile-menu .btn{ margin:16px 24px;}

/* Hero */
.hero{
  position:relative;
  height: 86vh; min-height:540px;
  display:flex; align-items:flex-end;
  background: linear-gradient(180deg, rgba(27,26,23,0.05) 0%, rgba(27,26,23,0.35) 55%, rgba(27,26,23,0.82) 100%), center/cover no-repeat;
}
.hero.hero-sm{ height:38vh; min-height:260px;}
.hero-content{ padding-bottom:60px; max-width:640px;}
.eyebrow{ color:var(--arena-desierto); font-size:12px; font-weight:500; letter-spacing:2.5px; text-transform:uppercase; margin-bottom:16px; display:block;}
.hero h1{ font-size:48px; margin-bottom:18px; color:var(--hueso-antiguo); font-weight:700;}
.hero.hero-sm h1{ font-size:36px; margin-bottom:8px;}
.hero p{ color:var(--hueso-antiguo); opacity:0.85; font-size:17px; max-width:480px; margin-bottom:28px; font-family:'Cormorant Garamond';}
.hero-ctas{ display:flex; gap:14px;}
/* "Hablar con un asesor" en el hero: mismo color que el fondo de la pagina
   (--bg, Hueso Antiguo) para que resalte solido sobre la foto oscura del hero,
   en vez del ghost transparente que usa btn-ghost en el resto del sitio. */
.hero-ctas .btn-ghost{ background:var(--bg); border-color:var(--bg); color:var(--text);}

/* Trust bar */
.trust{ background: var(--surface); border-bottom:1px solid var(--line); padding: 20px 0;}
.trust .wrap{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px;}
.trust-badge{ display:flex; align-items:center; gap:10px; font-size:13px; color:var(--text-muted); font-family:'IBM Plex Mono';}
.trust-badge b{ color:var(--text);}
.trust-logos{ display:flex; gap:26px; font-size:11px; letter-spacing:1px; color:var(--piedra-granitica); text-transform:uppercase; flex-wrap:wrap; font-family:'IBM Plex Mono';}

section{ padding: 84px 0;}
section.tight{ padding:52px 0;}
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:34px; flex-wrap:wrap; gap:16px;}
.section-head h2{ font-size:34px;}
.section-head p{ color:var(--text-muted); font-size:15px; max-width:420px;}

/* Buscador de experiencias */
.search-box{
  background: var(--surface); border:1px solid var(--line); border-radius:2px;
  padding:28px; margin-bottom:36px;
}
.search-field input{ font-size:17px; }
.search-filters{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; margin-top:18px;
}
.search-actions{ display:flex; gap:12px; margin-top:22px; }
@media (max-width: 900px){
  .search-filters{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 480px){
  .search-filters{ grid-template-columns:1fr; }
}

/* Filter pills */
.filters{ display:flex; gap:10px; margin-bottom:32px; flex-wrap:wrap;}
.pill{
  padding:9px 18px; border-radius:100px; border:1px solid var(--piedra-granitica);
  font-size:11px; font-weight:500; letter-spacing:1px; text-transform:uppercase;
  color:var(--text-muted); cursor:pointer; background:transparent; font-family:'IBM Plex Mono';
}
.pill.active{ background:var(--accent); border-color:var(--accent); color:var(--hueso-antiguo);}

/* Cards grid */
.grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:24px;}
.grid.grid-2{ grid-template-columns:repeat(2,1fr);}
.card{ background: var(--surface); border:1px solid var(--line); border-radius:2px; overflow:hidden;}
.card-img{ height:200px; background-size:cover; background-position:center; position:relative; background-color:#DCD2B8;}
.level{ position:absolute; top:14px; right:14px; background:rgba(27,26,23,0.78); color:var(--hueso-antiguo); padding:5px 12px; border-radius:2px; font-size:11px; letter-spacing:1px;}
.card-body{ padding:22px;}
.card-city{ font-size:11px; color:var(--accent); letter-spacing:1.5px; text-transform:uppercase; margin-bottom:10px;}
.card-title{ font-family:'Bebas Neue'; font-weight:400; font-size:22px; letter-spacing:0.5px; text-transform:uppercase; margin-bottom:10px;}
.card-desc{ font-size:14px; color:var(--text-muted); margin-bottom:14px; font-family:'Cormorant Garamond';}
.urgencia{ display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 4px;}
.urg{ font-family:'IBM Plex Mono'; font-size:11px; letter-spacing:0.5px; padding:4px 10px; border-radius:2px; border:1px solid var(--line); color:var(--text-muted); background:var(--surface);}
.urg-pronto,.urg-pocos{ border-color:var(--cobre-envejecido); color:var(--cobre-envejecido); font-weight:500;}
.urg-hoy{ background:var(--cobre-envejecido); border-color:var(--cobre-envejecido); color:var(--hueso-antiguo); font-weight:500;}
.urg-agotado{ background:var(--text); border-color:var(--text); color:var(--hueso-antiguo);}
.exp-aside .urgencia{ margin:0 0 14px;}
.card-meta{ display:flex; align-items:center; justify-content:space-between; margin-top:16px;}
.price{ font-size:12px; color:var(--text-muted); font-family:'IBM Plex Mono';}
.price b{ color:var(--text); font-size:16px; font-family:'Cormorant Garamond';}
.price.tbd{ font-style:italic;}

/* Value props ("Tres senales" + 1 practica) */
.values{ background:var(--negro-volcanico); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.values-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:32px;}
.value-item h3{ font-size:22px; margin-bottom:8px; color:var(--hueso-antiguo);}
.value-item p{ color:var(--arena-desierto); font-size:14px; font-family:'Cormorant Garamond';}
.value-num{ color:var(--cobre-envejecido); font-size:12px; font-weight:600; margin-bottom:10px; display:block; letter-spacing:1px;}

/* Testimonials */
.testi-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.testi{ background:var(--surface); border:1px solid var(--line); border-radius:2px; padding:24px;}
.stars{ color:var(--cobre-envejecido); font-size:14px; margin-bottom:12px;}
.testi p{ font-size:14px; color:var(--text-muted); margin-bottom:14px; font-family:'Cormorant Garamond'; font-style:italic;}
.testi-name{ font-size:12px; font-weight:500; font-family:'IBM Plex Mono';}

/* Blog */
.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.blog-img{ height:160px; width:100%; background-size:cover; background-position:center; border-radius:2px; margin-bottom:14px; background-color:#DCD2B8;}
.blog-tag{ font-size:10px; color:var(--accent); letter-spacing:1.5px; text-transform:uppercase;}
.blog-title{ font-family:'Bebas Neue'; font-size:20px; letter-spacing:0.5px; text-transform:uppercase; margin-top:8px;}
.blog-desc{ font-size:14px; color:var(--text-muted); margin-top:8px; font-family:'Cormorant Garamond';}
.blog-meta{ font-size:11px; color:var(--piedra-granitica); margin-top:6px; font-family:'IBM Plex Mono';}
.blog-post-body{ font-size:18px; color:var(--text); font-weight:500; max-width:720px; font-family:'Cormorant Garamond'; line-height:1.85; letter-spacing:0.2px;}
.blog-post-body p{ margin-bottom:24px;}
.blog-post-body b{ color:var(--text); font-weight:700;}
.blog-post-img{ margin:8px 0 32px;}
.blog-post-img img{ width:100%; border-radius:2px; display:block;}
.blog-post-img figcaption{ font-size:13px; color:var(--piedra-granitica); font-family:'IBM Plex Mono'; margin-top:10px;}

/* Galeria */
.gallery-tour{ margin-bottom:52px;}
.gallery-tour-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:16px; flex-wrap:wrap; gap:10px;}
.gallery-tour-head h3{ font-size:24px;}
.gallery-tour-link{ font-family:'IBM Plex Mono'; font-size:12px; color:var(--accent); letter-spacing:0.5px;}
.gallery-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:12px;}
.gallery-photo{ height:220px; background-size:cover; background-position:center; border-radius:2px; background-color:#DCD2B8;}

/* Encuesta de satisfaccion (formulario publico) */
.rating-input{ display:flex; gap:8px; flex-wrap:wrap; margin-top:4px; }
.rating-input label{
  display:flex; align-items:center; gap:6px; border:1px solid var(--piedra-granitica);
  border-radius:2px; padding:10px 16px; font-family:'IBM Plex Mono'; font-size:14px;
  color:var(--text-muted); cursor:pointer; background:var(--surface);
}
.rating-input input{ accent-color:var(--accent); }
.rating-input label:has(input:checked){ background:var(--accent); border-color:var(--accent); color:var(--hueso-antiguo); }
.form-field-hint{ font-size:12px; color:var(--piedra-granitica); font-family:'IBM Plex Mono'; margin-top:6px; }

/* Promo de canalizacion de aventura */
.promo-canalizacion{
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  background:var(--negro-volcanico); border:1px solid var(--line); border-radius:2px;
  padding:32px 36px;
}
.promo-canalizacion h3{ color:var(--hueso-antiguo); font-size:24px; margin-bottom:8px; }
.promo-canalizacion p{ color:var(--arena-desierto); font-size:15px; font-family:'Cormorant Garamond'; max-width:520px; }
@media (max-width: 900px){
  .promo-canalizacion{ padding:26px; }
}

/* Mapa de contacto */
.map-frame{
  width:100%; height:340px; border:1px solid var(--line); border-radius:2px;
  filter: grayscale(35%) sepia(15%) contrast(1.05) brightness(0.95);
}

/* Formularios */
.form-field{ margin-bottom:18px;}
.form-field label{ display:block; font-size:11px; color:var(--text-muted); margin-bottom:6px; font-family:'IBM Plex Mono'; letter-spacing:0.5px; text-transform:uppercase;}
.form-field input, .form-field textarea, .form-field select{
  width:100%; background:var(--surface); border:1px solid var(--piedra-granitica); border-radius:2px;
  padding:12px 14px; color:var(--text); font-family:'Cormorant Garamond'; font-size:17px;
}
.form-field textarea{ min-height:120px; resize:vertical;}
.alert{ padding:14px 18px; border-radius:2px; font-size:15px; margin-bottom:24px; font-family:'Cormorant Garamond';}
.alert-ok{ background:rgba(95,106,69,0.15); border:1px solid var(--verde-gobernadora); color:#3d4630;}
.alert-err{ background:rgba(139,94,60,0.15); border:1px solid var(--cobre-envejecido); color:#6e4930;}

/* Footer */
footer{ background:var(--negro-volcanico); color:var(--hueso-antiguo); padding:56px 0 28px;}
.footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:32px; margin-bottom:40px;}
footer h4{ font-size:11px; text-transform:uppercase; letter-spacing:1.5px; margin-bottom:16px; color:var(--arena-desierto);}
footer ul{ list-style:none;}
footer li{ margin-bottom:10px; font-size:15px; font-family:'Cormorant Garamond'; color:var(--hueso-antiguo);}
footer li a:hover{ color:var(--arena-desierto);}
.footer-bottom{ border-top:1px solid rgba(242,235,221,0.15); padding-top:24px; display:flex; justify-content:space-between; font-size:11px; color:var(--piedra-granitica); flex-wrap:wrap; gap:12px;}

.whatsapp-fab{
  position:fixed; bottom:28px; right:28px; z-index:60;
  background:var(--verde-gobernadora); color:var(--hueso-antiguo); width:54px; height:54px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:24px; font-weight:700;
  box-shadow:0 6px 18px rgba(27,26,23,0.35);
}

.breadcrumb{ font-size:11px; color:var(--piedra-granitica); margin-bottom:20px; letter-spacing:0.5px;}
.breadcrumb a:hover{ color:var(--accent);}

@media (max-width: 900px){
  section{ padding:52px 0;}
  section.tight{ padding:36px 0;}
  .wrap{ padding:0 18px;}

  header .wrap{ height:64px;}
  nav.main-nav, .header-actions{ display:none;}
  .menu-toggle{ display:flex;}
  .mobile-menu{ display:flex;}

  .hero{ height:78vh; min-height:460px;}
  .hero h1{font-size:34px;}
  .hero p{ font-size:15px;}
  .eyebrow{ font-size:11px;}

  .section-head h2{ font-size:26px;}
  .grid, .testi-grid, .blog-grid, .values-grid, .grid-2{grid-template-columns:1fr;}
  .values{ background:var(--negro-volcanico);}
  .values-grid{ gap:24px;}

  .trust .wrap{ flex-direction:column; align-items:flex-start; gap:12px;}
  .trust-logos{ gap:16px;}

  .footer-grid{grid-template-columns:1fr;}
  .footer-bottom{ flex-direction:column; align-items:flex-start;}

  .whatsapp-fab{ width:50px; height:50px; bottom:18px; right:18px;}
}

@media (max-width: 480px){
  .hero-content{ padding-bottom:40px;}
  .hero h1{ font-size:28px;}
  .card-title{ font-size:19px;}
  .value-item h3{ font-size:19px;}
}

/* ---------------------------------------------------------------
   Pagina de experiencia (detalle)
   PC: contenido a la izquierda + tarjeta de reserva fija a la derecha.
   Movil: titulo -> foto de portada -> precio con botones lado a lado -> resto.
--------------------------------------------------------------- */
.exp-grid{
  display:grid; grid-template-columns:minmax(0,2fr) minmax(280px,1fr);
  column-gap:48px; align-items:start;
  grid-template-areas:"head aside" "cover aside" "body aside";
}
.exp-head{ grid-area:head;}
.exp-cover{
  grid-area:cover; width:100%; aspect-ratio:16/9;
  background-size:cover; background-position:center; background-color:#DCD2B8;
  border-radius:2px; margin-bottom:28px; cursor:pointer;
}
.exp-aside{ grid-area:aside; position:sticky; top:104px;}
.exp-body{ grid-area:body;}
.exp-fecha{
  font-family:'IBM Plex Mono'; font-size:13px; color:var(--text-muted);
  border-bottom:1px solid var(--line); padding-bottom:14px; margin-bottom:14px;
}
.exp-fecha b{ color:var(--text); font-weight:500;}
.exp-actions{ display:flex; flex-direction:column; gap:12px;}
.exp-actions .btn{ width:100%; text-align:center;}

/* Galeria al final de la experiencia */
.exp-gallery{ margin-top:44px;}
.exp-gallery h2{ font-size:26px; margin-bottom:16px;}
.exp-gallery .gallery-photo{ cursor:pointer; transition:opacity .15s ease;}
.exp-gallery .gallery-photo:hover{ opacity:0.85;}

/* Lightbox (foto ampliada al dar clic) */
.lightbox{
  position:fixed; inset:0; z-index:100; background:rgba(27,26,23,0.93);
  display:none; align-items:center; justify-content:center; padding:24px;
}
.lightbox.open{ display:flex;}
.lightbox img{ max-width:92vw; max-height:88vh; border-radius:2px;}
.lightbox-close{
  position:absolute; top:14px; right:20px; background:none; border:none;
  color:var(--hueso-antiguo); font-size:38px; cursor:pointer; line-height:1;
}

@media (max-width: 900px){
  .exp-grid{ grid-template-columns:1fr; grid-template-areas:"head" "cover" "aside" "body";}
  .exp-cover{ margin-bottom:20px;}
  .exp-aside{ position:static; margin-bottom:28px;}
  /* Botones uno al lado del otro para aprovechar el ancho */
  .exp-actions{ flex-direction:row;}
  .exp-actions .btn{ flex:1; padding-left:10px; padding-right:10px; font-size:12px;}
}

/* ---------------------------------------------------------------
   Ficha técnica (experiencia.php) — bloque desplegable "Ver ficha
   técnica" y sus tipos de sección (lista, datos, cronograma, tabla, mapa).
   --------------------------------------------------------------- */
.ficha-panel{ margin-top:40px;}
.ficha-title{ font-size:24px; margin-bottom:14px; color:var(--text);}
.ficha-list{ list-style:none; padding:0; margin:0;}
.ficha-list li{
  position:relative; padding:8px 0 8px 26px; border-bottom:1px solid var(--line);
}
.ficha-list li::before{
  content:""; position:absolute; left:4px; top:16px; width:8px; height:8px;
  background:var(--accent); border-radius:50%;
}
.ficha-extras{ width:100%; border-collapse:collapse;}
.ficha-extras td{ padding:10px 0; border-bottom:1px solid var(--line);}
.ficha-extras-concepto{ color:var(--text);}
.ficha-extras-precio{ text-align:right; font-family:'IBM Plex Mono', monospace; white-space:nowrap; color:var(--text-muted);}

.ficha-tecnica-wrap{ margin-top:40px;}
.exp-faq{ margin-top:48px;}
.exp-faq h2{ font-size:26px; margin-bottom:18px;}
.faq-item{ border-top:1px solid var(--line); padding:14px 0;}
.faq-item:last-child{ border-bottom:1px solid var(--line);}
.faq-item summary{ cursor:pointer; font-family:'Cormorant Garamond'; font-size:19px; font-weight:600; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px;}
.faq-item summary::-webkit-details-marker{ display:none;}
.faq-item summary::after{ content:'+'; font-family:'IBM Plex Mono'; color:var(--cobre-envejecido); font-size:18px; flex:none;}
.faq-item[open] summary::after{ content:'\2212';}
.faq-resp{ padding:10px 0 4px; color:var(--text-muted); font-size:15px; line-height:1.6; font-family:'Cormorant Garamond';}
.exp-opiniones{ margin-top:48px;}
.exp-opiniones-head{ display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:20px;}
.exp-opiniones-head h2{ font-size:26px;}
.exp-rating{ font-size:13px; font-family:'IBM Plex Mono'; color:var(--text-muted); display:flex; align-items:center; gap:8px;}
.exp-rating .stars{ margin-bottom:0;}
.exp-opiniones .testi-grid{ grid-template-columns:repeat(auto-fill,minmax(240px,1fr));}
.ficha-toggle{ display:inline-block;}
.ficha-tecnica{
  margin-top:28px; padding-top:8px;
  border-top:1px solid var(--line);
}
.ficha-tecnica[hidden]{ display:none;}
.ficha-tecnica-seccion{ margin-top:34px;}
.ficha-tecnica-seccion:first-child{ margin-top:20px;}
.ficha-tecnica-seccion .ficha-title{ font-size:22px;}

/* Tipo "datos": tarjetas rótulo + valor */
.ficha-datos-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:16px;
}
.ficha-dato{
  background:var(--surface); border:1px solid var(--line); border-radius:2px; padding:16px 18px;
}
.ficha-dato-rotulo{
  display:block; font-family:'Bebas Neue', sans-serif; letter-spacing:1px; text-transform:uppercase;
  font-size:13px; color:var(--accent); margin-bottom:4px;
}
.ficha-dato-valor{ display:block; color:var(--text);}

/* Tipo "timeline": cronograma vertical */
.ficha-timeline{ list-style:none; padding:0; margin:0;}
.ficha-timeitem{
  display:grid; grid-template-columns:110px 1fr; gap:18px;
  padding:14px 0; border-bottom:1px solid var(--line);
}
.ficha-time{
  font-family:'IBM Plex Mono', monospace; font-size:13px; color:var(--accent); padding-top:2px;
}
.ficha-time-cuerpo b{ color:var(--text);}
.ficha-time-cuerpo p{ color:var(--text-muted); margin-top:4px;}

/* Tipo "mapa": iframe embebido */
.ficha-mapa{ border-radius:2px; overflow:hidden; border:1px solid var(--line);}
.ficha-mapa iframe{ width:100%; height:320px; border:0; display:block;}

@media (max-width: 640px){
  .ficha-timeitem{ grid-template-columns:1fr; gap:4px;}
}

/* ---------------------------------------------------------------
   Entregable por persona (ficha-personal.php) — checklist marcable
   con barra de progreso. El estado vive en localStorage.
   --------------------------------------------------------------- */
.fp-wrap{ max-width:820px;}
.fp-intro{ color:var(--text-muted); margin-bottom:28px;}
.fp-toolbar{ margin:-12px 0 28px;}
@media print{
  .no-print, header, footer, nav, .site-header, .site-footer, .mobile-nav, .countdown, .fp-acciones, .fp-progreso, .breadcrumb, .lightbox, .whatsapp-fab{ display:none !important;}
  body{ background:#fff; color:#000;}
  .fp-wrap{ max-width:none;}
  .fp-seccion{ break-inside:avoid; page-break-inside:avoid;}
  .fp-check input{ -webkit-print-color-adjust:exact; print-color-adjust:exact;}
  details.faq-item{ border:0;}
  details.faq-item .faq-resp{ display:block;}
  a[href]::after{ content:'';}
}
.fp-seccion{ margin-top:36px; padding-top:24px; border-top:1px solid var(--line);}
.fp-seccion:first-of-type{ border-top:0; padding-top:0;}
.fp-seccion-titulo{ font-size:22px; margin-bottom:14px; color:var(--text);}

.fp-checklist .fp-progreso{
  height:8px; background:var(--surface); border-radius:99px; overflow:hidden; border:1px solid var(--line);
}
.fp-checklist .fp-progreso-barra{
  display:block; height:100%; width:0; background:var(--accent); transition:width .2s ease;
}
.fp-progreso-fila{
  display:flex; justify-content:space-between; align-items:center; margin:8px 0 14px;
}
.fp-pct{ font-family:'IBM Plex Mono', monospace; font-size:13px; color:var(--text-muted);}
.fp-acciones{ display:flex; gap:16px;}
.fp-acciones .link-btn{
  background:none; border:0; cursor:pointer; padding:0; color:var(--accent);
  font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:.3px;
}
.fp-checklist.fp-completo .fp-progreso-barra{ background:var(--verde-gobernadora);}

.fp-check-list{ list-style:none; padding:0; margin:0;}
.fp-check-list li{ border-bottom:1px solid var(--line);}
.fp-check{
  display:flex; align-items:flex-start; gap:12px; padding:11px 4px; cursor:pointer;
}
.fp-check input[type="checkbox"]{
  width:20px; height:20px; margin-top:2px; flex-shrink:0; accent-color:var(--accent); cursor:pointer;
}
.fp-check-texto{ color:var(--text);}
.fp-check-texto small{ display:block; color:var(--text-muted); font-size:0.86em;}
.fp-check input:checked + .fp-check-texto{ color:var(--text-muted); text-decoration:line-through;}

/* Cuenta regresiva (includes/ficha-countdown.php) */
.countdown{
  background:var(--negro-volcanico); color:var(--hueso-antiguo);
  border-radius:2px; padding:16px 18px; margin:18px 0;
}
.countdown-titulo{
  display:block; font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:1px;
  text-transform:uppercase; color:var(--arena-desierto); margin-bottom:10px;
}
.countdown-grid{ display:flex; gap:10px;}
.cd-box{ flex:1; text-align:center; background:rgba(242,235,221,0.06); border-radius:2px; padding:8px 4px;}
.cd-num{ display:block; font-family:'Bebas Neue', sans-serif; font-size:28px; line-height:1;}
.cd-lbl{
  display:block; font-family:'IBM Plex Mono', monospace; font-size:9px; letter-spacing:1px;
  text-transform:uppercase; color:var(--piedra-granitica); margin-top:4px;
}
.countdown-hoy .cd-num{ color:var(--arena-desierto);}

/* ===== Ficha de condición del participante (/formulario/{token}) ===== */
.fp-form-wrap{ max-width:680px; }
.fp-form-intro{ color:var(--text-muted); font-size:17px; margin-bottom:26px; }

/* Barra de progreso por pasos */
.fp-steps-bar{ margin-bottom:26px; }
.fp-steps-progress{ height:6px; background:rgba(139,134,124,0.2); border-radius:3px; overflow:hidden; }
.fp-steps-progress span{ display:block; height:100%; background:var(--accent); transition:width .3s ease; }
.fp-steps-meta{ display:flex; justify-content:space-between; margin-top:8px; font-family:'IBM Plex Mono'; font-size:11px; letter-spacing:0.5px; text-transform:uppercase; color:var(--text-muted); }

/* Pasos: sin JS se ven todos; con JS solo el activo */
.fp-form.fp-js .fp-step{ display:none; }
.fp-form.fp-js .fp-step.fp-step-activo{ display:block; animation:fpFade .25s ease; }
@keyframes fpFade{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none;} }
.fp-step{ border:none; padding:0; margin:0 0 8px; }
.fp-step-legend{ display:flex; align-items:center; gap:12px; font-family:'Cormorant Garamond'; font-style:italic; font-size:24px; color:var(--text); margin-bottom:20px; padding:0; }
.fp-step-num{ display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; background:var(--accent); color:var(--hueso-antiguo); font-family:'IBM Plex Mono'; font-style:normal; font-size:13px; flex:none; }
.fp-req{ color:var(--accent); }

.fp-hidden{ display:none !important; }

/* Marcado de error */
.fp-field.fp-invalid input, .fp-field.fp-invalid textarea, .fp-field.fp-invalid select{ border-color:var(--cobre-envejecido); box-shadow:0 0 0 2px rgba(139,94,60,0.15); }
.fp-field.fp-invalid .rating-input{ outline:1px dashed var(--cobre-envejecido); outline-offset:4px; border-radius:2px; }

/* Consentimientos */
.fp-consent{ margin-bottom:14px; }
.fp-consent-label{ display:flex; gap:12px; align-items:flex-start; cursor:pointer; font-family:'Creator Genius'; font-size:15px; color:var(--text); line-height:1.5; }
.fp-consent-label input{ margin-top:3px; width:18px; height:18px; accent-color:var(--accent); flex:none; }
.fp-consent.fp-invalid .fp-consent-label{ color:var(--cobre-envejecido); }

/* Navegación */
.fp-nav{ display:flex; gap:12px; margin-top:28px; flex-wrap:wrap; }
.fp-prev, .fp-next{ display:none; }
.fp-form.fp-js .fp-prev, .fp-form.fp-js .fp-next{ display:inline-flex; }
/* [hidden] no bastaba: .btn (display:inline-block) y .fp-js .fp-next
   (display:inline-flex) le ganan por especificidad, así que "Siguiente" y
   "Enviar" se veían en todos los pasos a la vez. */
.fp-nav [hidden]{ display:none !important; }
.fp-nav .fp-next, .fp-nav .fp-submit{ margin-left:auto; }

/* ---------------------------------------------------------------
   Carta responsiva y consentimiento informado
   Se usa en tres sitios (mismo HTML, ver includes/carta-responsiva.php):
   el paso final de /formulario/{token}, /carta-responsiva (en blanco,
   para imprimir) y /admin/formularios/respuesta/{id}/carta (ya firmada).
   Pensada para verse igual en pantalla y en papel: papel claro, tinta
   negro volcanico, acento cobre solo en detalles.
   --------------------------------------------------------------- */
.carta-pagina{ background:var(--bg); padding:28px 0 60px;}
.carta-wrap{ max-width:860px;}
.carta-toolbar{
  display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between;
  margin-bottom:24px;
}
.carta-toolbar-texto{ flex:1; min-width:240px; color:var(--text-muted); font-size:16px;}

.carta{
  position:relative;
  background:#FFFDF8;
  border:1px solid var(--line);
  border-radius:2px;
  padding:40px 44px 34px;
  color:var(--text);
}
/* Marca de agua: petroglifo grande y centrado detrás del texto. Va como <img>
   (no como background-image) para que se imprima sin depender de que el usuario
   active "imprimir fondos" en el diálogo del navegador. */
.carta-watermark{
  position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);
  width:min(60%, 420px); height:auto;
  opacity:0.05; pointer-events:none; user-select:none; z-index:0;
  -webkit-print-color-adjust:exact; print-color-adjust:exact;
}
.carta > *:not(.carta-watermark){ position:relative; z-index:1;}
.carta-head{
  display:flex; gap:20px; align-items:flex-start; justify-content:space-between;
  border-bottom:2px solid var(--negro-volcanico); padding-bottom:18px;
}
.carta-head-texto{ flex:1;}
.carta-logo{ width:52px; height:auto; flex:none; order:2;}
.carta-titulo{ font-size:26px; line-height:1.2; margin:0;}
.carta-sub{
  font-family:'IBM Plex Mono', monospace; font-size:11px; line-height:1.6;
  letter-spacing:0.3px; color:var(--text-muted); margin-top:8px; text-transform:uppercase;
}

.carta-tag{
  display:inline-block; margin-top:7px; padding:3px 9px;
  background:var(--arena-desierto); color:var(--negro-volcanico);
  font-family:'IBM Plex Mono', monospace; font-size:10px; letter-spacing:0.6px;
  text-transform:uppercase; border-radius:2px;
  -webkit-print-color-adjust:exact; print-color-adjust:exact;
}
.carta-firma-sub{ text-transform:none; letter-spacing:0; font-style:italic;}

.carta-datos{ margin-top:20px; padding-bottom:18px; border-bottom:1px solid var(--line);}
.carta-grid{ display:grid; grid-template-columns:1fr 1fr; gap:6px 28px; margin-top:6px;}
.carta-fila{ font-size:16px; line-height:1.9; display:flex; gap:8px; align-items:baseline;}
.carta-fila b{ font-weight:600; white-space:nowrap;}
.carta-linea{ flex:1; min-width:80px; border-bottom:1px solid var(--piedra-granitica); height:1em;}
.carta-dato{ flex:1; border-bottom:1px solid var(--line);}

.carta-cuerpo{ margin-top:22px;}
.carta-clausula-titulo{
  font-family:'Bebas Neue', sans-serif; font-size:16px; letter-spacing:0.8px;
  text-transform:uppercase; margin:20px 0 6px; color:var(--negro-volcanico);
}
.carta-p{ font-size:15.5px; line-height:1.65; margin-bottom:8px; text-align:justify; hyphens:auto;}

.carta-aceptaciones, .carta-tutor{ margin-top:24px; padding-top:16px; border-top:1px solid var(--line);}
/* En la versión de menor el bloque de tutor va pegado al de datos: sin esto se
   ven dos rayas juntas (el borde inferior de uno y el superior del otro). */
.carta-datos + .carta-tutor{ border-top:0; padding-top:0; margin-top:18px;}
.carta-check{ display:flex; gap:10px; align-items:flex-start; font-size:15.5px; line-height:1.6; margin-bottom:7px;}
.carta-box{
  flex:none; width:15px; height:15px; margin-top:4px;
  border:1.5px solid var(--negro-volcanico); border-radius:1px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:12px; line-height:1;
  -webkit-print-color-adjust:exact; print-color-adjust:exact;
}
.carta-box.marcado{ background:var(--negro-volcanico); color:#FFFDF8;}

.carta-acept-firma{ margin-top:18px; max-width:460px;}

.carta-firmas{ display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-top:44px;}
.carta-firma{ text-align:center;}
.carta-firma-espacio{ height:78px;}
.carta-firma-linea{ border-top:1px solid var(--negro-volcanico); margin-top:2px;}
.carta-firma-label{
  font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:0.4px;
  text-transform:uppercase; color:var(--text-muted); margin-top:7px; line-height:1.6;
}
.carta-pie{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:8px;
  margin-top:30px; padding-top:12px; border-top:1px solid var(--line);
  font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:0.3px;
  color:var(--text-muted); text-transform:uppercase;
}
/* .carta-linea usa flex:1 y necesita un ancho propio fuera de .carta-fila,
   si no el renglón de "Lugar y fecha" se queda sin raya para escribir. */
.carta-pie .carta-linea{ flex:0 1 240px; min-width:150px; height:1.2em;}

/* Varias cartas en una misma página (cartas del grupo, copias en blanco). */
.carta-hoja + .carta-hoja{ margin-top:36px;}

@media (max-width: 640px){
  .carta{ padding:26px 20px 24px;}
  .carta-grid, .carta-firmas{ grid-template-columns:1fr;}
  .carta-firmas{ gap:26px;}
  .carta-head{ flex-direction:column; gap:12px;}
}

@media print{
  /* Margen de hoja fijo: sin esto cada navegador pone el suyo y la carta baila. */
  @page{ size: letter; margin: 14mm;}
  /* En papel la carta SIEMPRE va a dos columnas, aunque se mande a imprimir
     desde un celular o con la ventana angosta: si no, el bloque de datos y las
     firmas se apilan y el documento sale con el doble de hojas. */
  .carta-head{ flex-direction:row; align-items:flex-start;}
  .carta-grid, .carta-firmas{ grid-template-columns:1fr 1fr;}
  .carta{ padding:0;}
  .carta-pagina{ background:#fff; padding:0;}
  /* Marca de agua al imprimir. position:fixed parecía lo obvio (una por hoja),
     pero Chrome no la reancla en cada página: se va recorriendo hacia abajo y en
     documentos largos acaba fuera. Se ancla entonces al alto de la PRIMERA hoja
     de cada carta —cada carta empieza en hoja nueva—, que es la que lleva los
     datos y la que se ve al recibir el documento. Determinista y sin apilarse
     cuando se imprimen varias cartas seguidas. */
  .carta-watermark{ position:absolute; top:120mm; left:50%; transform:translate(-50%, -50%); width:110mm; opacity:0.07;}
  .carta-hoja{ break-after:page; page-break-after:always;}
  .carta-hoja:last-child{ break-after:auto; page-break-after:auto;}
  .carta-hoja + .carta-hoja{ margin-top:0;}
  .carta-wrap{ max-width:none; padding:0;}
  .carta{ border:0; padding:0; background:#fff;}
  .carta-clausula-titulo, .carta-check, .carta-fila{ break-inside:avoid; page-break-inside:avoid;}
  /* Un titulo de clausula nunca se queda huerfano al pie de una hoja: se va
     con su texto a la siguiente (pasaba con "11. Firma y validez"). */
  .carta-clausula-titulo{ break-after:avoid; page-break-after:avoid;}
  .carta-firmas{ break-inside:avoid; page-break-inside:avoid;}
  .carta-p{ font-size:10.5pt; line-height:1.45;}
  .carta-fila, .carta-check{ font-size:10.5pt;}
}

/* --- Paso de la carta dentro del formulario publico -------------------- */
.carta-intro{ color:var(--text-muted); font-size:16px; margin-bottom:16px;}
.carta-doc{
  max-height:340px; overflow-y:auto;
  background:#FFFDF8; border:1px solid var(--line); border-radius:2px;
  padding:20px 22px; margin-bottom:10px;
}
.carta-doc:focus{ outline:2px solid var(--accent); outline-offset:2px;}
.carta-doc .carta-clausula-titulo:first-child{ margin-top:0;}
.carta-doc-pie{ font-size:14px; color:var(--text-muted); margin-bottom:22px;}
.carta-doc-pie a{ color:var(--accent); text-decoration:underline;}
.carta-legal-pie{ font-size:13.5px; line-height:1.6; color:var(--text-muted); margin-top:16px;}

.fp-menor-bloque{
  margin:18px 0 6px; padding:16px 18px;
  background:var(--surface); border-left:3px solid var(--accent); border-radius:2px;
}
.fp-menor-aviso{ font-size:15px; color:var(--text-muted); margin-bottom:12px;}


/* Fecha de la actividad en /admin/formularios/{id}: es la que se imprime en la
   carta responsiva, por eso vive junto al enlace de la convocatoria. */
.admin-fecha-form{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  margin:-8px 0 22px; padding:12px 14px;
  background:var(--surface); border-left:3px solid var(--accent); border-radius:2px;
}
.admin-fecha-form label{
  font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.5px;
  text-transform:uppercase; color:var(--text-muted);
}
.admin-fecha-form input[type="date"]{
  padding:7px 10px; border:1px solid var(--line); border-radius:2px;
  background:#FFFDF8; font-family:'IBM Plex Mono', monospace; font-size:13px; color:var(--text);
}
.admin-fecha-nota{ font-size:15px; color:var(--text-muted);}

/* Botonera de impresión de /admin/formularios/{id}: cartas del grupo y formatos
   en blanco de adulto y de menor. */
.admin-imprimir{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  margin:0 0 22px; padding:12px 14px;
  background:var(--surface); border-left:3px solid var(--verde-gobernadora); border-radius:2px;
}
.admin-imprimir-titulo{
  font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.5px;
  text-transform:uppercase; color:var(--text-muted);
}
.admin-imprimir-nota{ flex:1 1 100%; font-size:15px; color:var(--text-muted);}

/* ===============================================================
   Encuesta de Satisfacción (/encuesta/{token})
   Reutiliza .fp-* del formulario de participante; aquí solo van los
   controles que esa ficha no tiene. Paleta del códice, sin colores nuevos.
   =============================================================== */
.sat-nps{ gap:6px; }
.sat-nps-op{ flex:1 1 auto; min-width:40px; padding:0 !important; text-align:center; }
.sat-nps-op input{ position:absolute; opacity:0; width:0; height:0; }
.sat-nps-op span{
  display:block; padding:11px 0; border:1px solid var(--line); border-radius:2px;
  font-family:'IBM Plex Mono'; font-size:14px; cursor:pointer; transition:background .15s, color .15s, border-color .15s;
}
.sat-nps-op:has(input:checked) span{ background:var(--accent); border-color:var(--accent); color:var(--hueso-antiguo); }
.sat-nps-op:hover span{ border-color:var(--accent); }
.sat-nps-pies{
  display:flex; justify-content:space-between; margin-top:6px;
  font-family:'IBM Plex Mono'; font-size:10.5px; letter-spacing:0.5px;
  text-transform:uppercase; color:var(--text-muted);
}

.sat-escala{ gap:6px; }
.sat-escala-op{ flex:1 1 92px; padding:0 !important; text-align:center; }
.sat-escala-op input{ position:absolute; opacity:0; width:0; height:0; }
.sat-escala-op .sat-escala-num{
  display:block; padding:9px 0 3px; border:1px solid var(--line); border-bottom:none;
  border-radius:2px 2px 0 0; font-family:'IBM Plex Mono'; font-size:14px; cursor:pointer;
}
.sat-escala-op .sat-escala-txt{
  display:block; padding:3px 4px 8px; border:1px solid var(--line); border-top:none;
  border-radius:0 0 2px 2px; font-size:12px; line-height:1.3; cursor:pointer;
  color:var(--text-muted);
}
.sat-escala-op:has(input:checked) .sat-escala-num,
.sat-escala-op:has(input:checked) .sat-escala-txt{
  background:var(--accent); border-color:var(--accent); color:var(--hueso-antiguo);
}
.sat-escala-op:hover .sat-escala-num, .sat-escala-op:hover .sat-escala-txt{ border-color:var(--accent); }

.sat-multi{ display:flex; flex-direction:column; gap:8px; margin-top:6px; }
.sat-multi-op{ display:flex; align-items:flex-start; gap:10px; cursor:pointer; font-size:15px; }
.sat-multi-op input{ margin-top:5px; accent-color:var(--accent); flex:none; }

.fp-field.sat-pedido label::after{
  content:' — lo necesitamos para darte seguimiento';
  font-family:'IBM Plex Mono'; font-size:10.5px; letter-spacing:0.4px;
  text-transform:uppercase; color:var(--accent);
}

.sat-final-texto{ color:var(--text-muted); font-size:17px; margin-top:16px; max-width:560px; }
.sat-final-acciones{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.sat-final-nota{ color:var(--text-muted); font-size:14px; margin-top:18px; }
.sat-proximas{ list-style:none; margin-top:22px; border-top:1px solid var(--line); }
.sat-proximas li{
  display:flex; justify-content:space-between; align-items:baseline; gap:14px;
  padding:13px 0; border-bottom:1px solid var(--line);
}
.sat-proximas li a{ font-size:17px; }
.sat-proximas li span{
  font-family:'IBM Plex Mono'; font-size:11px; letter-spacing:0.5px;
  text-transform:uppercase; color:var(--text-muted); flex:none;
}

@media (max-width:560px){
  .sat-nps-op{ min-width:0; flex:1 1 calc(100%/6 - 6px); }
  .sat-nps-op span{ padding:9px 0; font-size:13px; }
  .sat-escala-op{ flex:1 1 calc(50% - 6px); }
}