/*
Theme Name: Catarata Rio Tigre
Theme URI: https://example.com
Author: Cliente Catarata Río Tigre
Description: Tema de WordPress hecho a medida para el sitio turístico de la Catarata Río Tigre (Oxapampa, Pasco). Cada sección (Inicio, La Catarata, Cómo Llegar, Tours y Precios, Galería, Contacto) es una página independiente de WordPress.
Version: 2.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: catarata-rio-tigre
*/

/* ==========================================================
   Todo el CSS de abajo es el diseño del sitio.
   Se puede editar aquí mismo desde Apariencia > Editor de archivos de tema.
   ========================================================== */

:root{
    --canopy: #14312a;
    --canopy-deep: #0d211c;
    --moss: #3f6350;
    --river: #4f8f8c;
    --river-light: #a9d2cd;
    --stone: #b5713f;
    --stone-dark: #8f5730;
    --mist: #f2ede2;
    --mist-dim: #e7dfcd;
    --ink: #1c231f;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    font-family:'Work Sans', sans-serif;
    background:var(--mist);
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.display{
    font-family:'Fraunces', serif;
    font-weight:600;
    letter-spacing:-0.01em;
    margin:0;
  }
  p{line-height:1.65; margin:0 0 1em;}
  a{color:inherit;}
  img{max-width:100%; display:block;}

  /* ---------- NAV ---------- */
  header{
    position:sticky; top:0; z-index:50;
    background:var(--canopy);
    border-bottom:1px solid rgba(255,255,255,0.08);
  }
  .nav-wrap{
    max-width:1100px; margin:0 auto;
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 24px;
  }
  .brand{
    display:flex; align-items:center; gap:10px;
    color:var(--mist);
    font-family:'Fraunces', serif; font-weight:600; font-size:1.15rem;
    text-decoration:none;
  }
  .brand-mark{
    width:38px; height:38px; flex:none;
    object-fit:contain;
  }
  nav.tabs{
    background:rgba(255,255,255,0.06);
    padding:4px; border-radius:999px;
  }
  nav.tabs .tabs-menu{
    display:flex; gap:4px;
    list-style:none; margin:0; padding:0;
  }
  nav.tabs .tabs-menu li{ margin:0; }
  nav.tabs .tabs-menu a{
    display:inline-block;
    font-family:'Work Sans', sans-serif;
    font-size:0.92rem;
    color:var(--river-light);
    background:transparent;
    text-decoration:none;
    padding:9px 16px;
    border-radius:999px;
    cursor:pointer;
    transition:background .25s ease, color .25s ease;
    white-space:nowrap;
  }
  nav.tabs .tabs-menu a:hover{ color:var(--mist); }
  .nav-toggle{
    display:none;
    background:none; border:none; color:var(--mist);
    font-size:1.6rem; cursor:pointer; padding:4px 8px;
  }

  @media (max-width: 860px){
    nav.tabs{
      position:absolute; top:64px; left:0; right:0;
      border-radius:0;
      background:var(--canopy-deep);
      padding:10px;
      display:none;
    }
    nav.tabs.open{ display:block; }
    nav.tabs .tabs-menu{ flex-direction:column; gap:2px; }
    nav.tabs .tabs-menu a{ text-align:left; border-radius:8px; display:block; }
    .nav-toggle{ display:block; }
  }

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    background:var(--canopy-deep);
    color:var(--mist);
    overflow:hidden;
    min-height:640px;
    display:flex;
    align-items:center;
  }
  .hero-bg-video{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover;
    z-index:0;
  }
  .hero-overlay{
    position:absolute; inset:0; z-index:1;
    background:linear-gradient(100deg, rgba(13,33,28,0.92) 0%, rgba(13,33,28,0.62) 45%, rgba(13,33,28,0.25) 100%);
  }
  .hero-inner{
    max-width:1100px; margin:0 auto;
    padding:72px 24px;
    position:relative; z-index:2;
    width:100%;
  }
  .eyebrow{
    color:var(--river-light);
    font-size:0.95rem;
    margin-bottom:18px;
  }
  .hero h1{
    font-size:clamp(2.6rem, 6vw, 4.6rem);
    line-height:1.02;
    max-width:11ch;
  }
  .hero p.lede{
    max-width:46ch;
    font-size:1.15rem;
    color:var(--mist-dim);
    margin-top:22px;
  }
  .hero-stats{
    display:flex; gap:40px; margin-top:48px; flex-wrap:wrap;
  }
  .stat .num{ font-family:'Fraunces', serif; font-size:2.2rem; color:var(--river-light); }
  .stat .lbl{ font-size:0.88rem; color:var(--mist-dim); margin-top:2px; }

  .cta-row{ margin-top:44px; display:flex; gap:14px; flex-wrap:wrap; }
  .btn{
    display:inline-block; padding:13px 26px; border-radius:6px;
    font-size:0.98rem; cursor:pointer; border:1px solid transparent;
    font-family:'Work Sans', sans-serif; font-weight:500;
    text-decoration:none;
  }
  .btn-primary{ background:var(--stone); color:var(--mist); }
  .btn-primary:hover{ background:var(--stone-dark); }
  .btn-ghost{ border-color:rgba(242,237,226,0.35); color:var(--mist); background:transparent; }
  .btn-ghost:hover{ border-color:var(--mist); }

  /* video hero replaces the previous decorative SVG */

  /* ---------- GENERIC SECTION LAYOUT ---------- */
  .wrap{ max-width:1100px; margin:0 auto; padding:80px 24px; }
  .wrap.tight{ padding-top:56px; }
  .section-head{ max-width:60ch; margin-bottom:48px; }
  .section-head .kicker{ color:var(--stone-dark); font-size:0.95rem; margin-bottom:10px; }
  .section-head h2{ font-size:clamp(1.9rem, 3.4vw, 2.6rem); }

  .grid-2{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:start; }
  @media (max-width:760px){ .grid-2{ grid-template-columns:1fr; } }

  .fact-list{ list-style:none; margin:28px 0 0; padding:0; display:flex; flex-direction:column; gap:16px; }
  .fact-list li{
    display:flex; gap:14px; padding-bottom:16px;
    border-bottom:1px solid var(--mist-dim);
  }
  .fact-list .fk{ font-family:'Fraunces', serif; color:var(--stone-dark); min-width:110px; }
  .fact-list .fv{ color:var(--ink); }

  .panel{
    background:var(--canopy);
    color:var(--mist);
    border-radius:10px;
    padding:34px;
  }
  .panel h3{ color:var(--river-light); font-size:1.3rem; margin-bottom:14px; }
  .panel p{ color:var(--mist-dim); }

  /* ---------- CATARATA (details) ---------- */
  .badge-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:24px; }
  .badge{
    font-size:0.82rem; padding:6px 12px; border-radius:999px;
    background:var(--mist-dim); color:var(--moss);
  }

  /* ---------- VIDEO FRAME (adapts to horizontal or vertical) ---------- */
  .video-frame{
    background:var(--canopy-deep);
    border-radius:12px;
    overflow:hidden;
    display:flex; align-items:center; justify-content:center;
    max-height:560px;
    min-height:260px;
  }
  .video-frame video{
    width:100%; height:100%; max-height:560px;
    object-fit:contain; display:block;
  }
  /* ---------- LLEGAR ---------- */
  .steps{ counter-reset:step; list-style:none; margin:0; padding:0; }
  .steps li{
    position:relative; padding-left:52px; margin-bottom:30px;
  }
  .steps li::before{
    counter-increment:step; content:counter(step);
    position:absolute; left:0; top:-2px;
    width:36px; height:36px; border-radius:50%;
    background:var(--river); color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-family:'Fraunces', serif; font-size:1rem;
  }
  .steps h3{ font-size:1.1rem; margin-bottom:6px; }
  .steps p{ color:#4b554e; }

  .map-box{
    background:var(--mist-dim); border-radius:10px; padding:26px;
    font-size:0.95rem; color:#4b554e;
  }
  .map-box .row{ display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid rgba(0,0,0,0.08); }
  .map-box .row:last-child{ border-bottom:none; }
  .map-frame{
    border-radius:10px; overflow:hidden;
    height:420px; border:1px solid var(--mist-dim);
  }

  /* ---------- TOURS ---------- */
  .tour-card{
    border:1px solid var(--mist-dim); border-radius:10px; padding:30px;
    background:#fff;
  }
  .price-tag{ font-family:'Fraunces', serif; font-size:2.4rem; color:var(--stone-dark); margin:8px 0 2px; }
  .price-tag span{ font-size:1rem; font-family:'Work Sans'; color:#6b7268; }
  .tour-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; margin-top:36px; }
  @media (max-width:700px){ .tour-grid{ grid-template-columns:1fr; } }
  .tour-card ul{ margin:18px 0 0; padding-left:18px; color:#4b554e; }
  .tour-card li{ margin-bottom:8px; }
  .schedule-pill{
    display:inline-block; background:var(--river-light); color:var(--canopy);
    font-size:0.85rem; padding:5px 12px; border-radius:6px; margin-right:8px; margin-top:14px;
  }
  .note-box{
    margin-top:40px; padding:20px 24px; border-left:3px solid var(--stone);
    background:var(--mist-dim); border-radius:0 8px 8px 0; font-size:0.94rem; color:#4b554e;
  }

  /* ---------- GALERIA ---------- */
  .gallery-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:14px;
  }
  @media (max-width:700px){ .gallery-grid{ grid-template-columns:repeat(2,1fr); } }
  .tile{
    aspect-ratio:4/5; border-radius:8px; position:relative; overflow:hidden;
    display:flex; align-items:flex-end; padding:14px;
    color:#fff; font-size:0.85rem;
  }
  .tile span{ position:relative; z-index:2; }
  .tile::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.55) 100%);
  }
  .t1{ background:linear-gradient(150deg,#1f5b52,#0d211c); }
  .t2{ background:linear-gradient(150deg,#4f8f8c,#1f5b52); }
  .t3{ background:linear-gradient(150deg,#8f5730,#3f6350); }
  .t4{ background:linear-gradient(150deg,#3f6350,#14312a); }
  .t5{ background:linear-gradient(150deg,#a9d2cd,#4f8f8c); }
  .t6{ background:linear-gradient(150deg,#b5713f,#0d211c); }
  .gallery-note{ margin-top:22px; font-size:0.9rem; color:#6b7268; }

  /* ---------- CONTACTO ---------- */
  .contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; }
  @media (max-width:760px){ .contact-grid{ grid-template-columns:1fr; } }
  form{ display:flex; flex-direction:column; gap:16px; }
  label{ font-size:0.88rem; color:#4b554e; margin-bottom:6px; display:block; }
  input, textarea{
    width:100%; padding:12px 14px; border-radius:6px;
    border:1px solid #cfc7b3; font-family:'Work Sans'; font-size:0.96rem;
    background:#fff; color:var(--ink);
  }
  textarea{ min-height:110px; resize:vertical; }
  .contact-info li{ list-style:none; margin-bottom:22px; }
  .contact-info .ck{ font-size:0.85rem; color:var(--stone-dark); margin-bottom:4px; }
  .contact-info .cv{ font-size:1.05rem; }

  footer{
    background:var(--canopy-deep); color:var(--mist-dim);
    padding:44px 24px 32px;
  }
  .footer-inner{
    max-width:1100px; margin:0 auto;
    display:flex; justify-content:space-between; align-items:flex-start; gap:32px;
    flex-wrap:wrap;
    border-bottom:1px solid rgba(255,255,255,0.1);
    padding-bottom:28px;
  }
  .footer-brand{ display:flex; flex-direction:column; gap:18px; }
  .footer-social{ display:flex; gap:14px; }
  .footer-social a{
    width:36px; height:36px; border-radius:50%;
    background:rgba(255,255,255,0.08);
    display:flex; align-items:center; justify-content:center;
    color:var(--mist-dim); text-decoration:none;
    transition:background .2s ease, color .2s ease;
  }
  .footer-social a:hover{ background:var(--river); color:#fff; }
  .footer-links{
    display:flex; flex-direction:column; align-items:flex-end; gap:10px;
    font-size:0.9rem; text-align:right;
  }
  .footer-links a{ color:var(--mist-dim); text-decoration:none; }
  .footer-links a:hover{ color:#fff; }
  .footer-rights{ margin:6px 0 0; font-size:0.82rem; color:#8f9a92; }

  .whatsapp-float{
    position:fixed; right:22px; bottom:22px; z-index:80;
    width:58px; height:58px; border-radius:50%;
    background:#25D366;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 10px 24px rgba(0,0,0,0.28);
    transition:transform .2s ease;
  }
  .whatsapp-float:hover{ transform:scale(1.06); }
  @media (max-width:640px){
    .footer-inner{ flex-direction:column; align-items:flex-start; }
    .footer-links{ align-items:flex-start; text-align:left; }
  }

  /* ---------- AJUSTES PARA MÓVILES ---------- */
  @media (max-width:480px){
    .hero{ min-height:520px; }
    .hero-inner{ padding:48px 20px; }
    .hero h1{ max-width:100%; }
    .wrap{ padding:52px 20px; }
    .section-head{ margin-bottom:32px; }

    /* Filas de "Cómo Llegar": etiqueta arriba, valor abajo, para que el texto largo no se apriete */
    .map-box{ padding:20px; }
    .map-box .row{
      flex-direction:column; align-items:flex-start; gap:4px;
    }
    .map-box .row span:last-child{ color:var(--ink); font-weight:500; }

    /* Filas de "Tarifas de ingreso" y otras listas de datos: mismo criterio */
    .fact-list li{ flex-direction:column; gap:4px; }
    .fact-list .fk{ min-width:0; }

    .panel{ padding:24px; }
    .tour-card{ padding:22px; }
    .steps li{ padding-left:46px; }
    .map-frame{ height:280px; }
    .video-frame{ min-height:200px; max-height:400px; }
    .whatsapp-float{ width:52px; height:52px; right:16px; bottom:16px; }
  }


  /* Resalta el enlace del menú correspondiente a la página actual */
  nav.tabs .current-menu-item > a,
  nav.tabs .current_page_item > a{
    background:var(--stone);
    color:var(--mist);
  }

  /* Permite que cada tile de la galería use una imagen subida por el cliente */
  .tile{ background-size:cover; background-position:center; }