/*  Variables globales  */
:root{
  --primary:#ff8a00;
  --bg:#000;
  --text:#fff;
  --panel:#3c2f1f;
  --card:#3b2f1f;      /* tarjetas internas */
  --beige:#b7a88d;     /* fondo pantallas internas */

  /* alturas del header */
  --header-h-desktop:68px;
  --header-h-mobile:44px;

  /* espaciados comunes */
  --y-head-top:26px;
  --y-head-bottom-tight:6px;
  --y-wrap-bottom:64px;
}

/* @layer organiza las partes del CSS (reset, base, layout, components, pages, utilities) en orden de prioridad */
@layer reset, base, layout, components, pages, utilities;

/* reset*/
@layer reset{
  *{ box-sizing:border-box }
  html,body{ height:100%; overflow-x:hidden }
  img{ max-width:100%; display:block }
}

/* base */
@layer base{
  body{
    margin:0;
    color:var(--text);
    background:var(--bg);
    font-family:'Montserrat',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    display:flex;
    flex-direction:column;
  }

  main{ flex:1 0 auto; }

  .wrap{
    width:100%;
    max-width:1360px;
    margin-inline:auto;
    padding:0 24px;
  }

  .sr-only{
    position:absolute;
    width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }

  input, select, button, a{ -webkit-tap-highlight-color:transparent; }
  input:focus-visible, select:focus-visible, textarea:focus-visible{
    outline:3px solid #fff8; outline-offset:2px;
  }

  /* Tipografías por página */
  .page-home{
    font-family:'Montserrat',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  }
  .page-destinos, .page-itinerario, .page-contacto{
    font-family:"Noto Sans",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  }
}

/* layout */
@layer layout{
  /* Header  */
  .site-header{
    position:sticky;
    top:0;
    z-index:20;
    background:var(--panel);
    color:#fff;
    box-shadow:0 2px 10px rgba(0,0,0,.25);
  }
  .site-header .wrap{
    max-width:none;
    width:100%;
    margin:0;
    padding:0;
  }
  .header-grid{
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:var(--header-h-desktop);
    padding:0 12px;
  }

  .brand{
    display:flex;
    align-items:center;
    gap:12px;
    color:#fff;
    text-decoration:none;
    min-width:0;
  }
  .brand-text{ display:flex; flex-direction:column; line-height:1.05; min-width:0 }
  .brand-title{ margin:0; font-size:20px; font-weight:900; letter-spacing:.06em; white-space:nowrap }
  .brand-sub{ font-size:12px; opacity:.95; margin-left:0 }

  .top-actions{ display:flex; align-items:center; gap:14px; flex-wrap:nowrap; }

  /* Buscador solo en Destinos */
  .top-actions .search{ display:none; }
  .page-destinos .top-actions .search{ display:flex; }

  .search{
    display:flex;
    align-items:center;
    gap:8px;
    background:#fff1;
    border:2px solid #fff6;
    border-radius:999px;
    padding:6px 12px;
    flex:0 0 auto;
    width:auto;
    max-width:480px;
  }
  .search input{
    background:transparent;
    border:0;
    color:#fff;
    padding:6px 4px;
    outline:0;
    min-width:120px;
  }
  .search input::placeholder{ color:#fffc }
  .search button{
    border:0; background:transparent; color:#fff; font-size:18px; cursor:pointer;
  }
  .search button .material-symbols-outlined{ font-size:22px }

  .menu-wrapper{ position:relative; z-index:25 }
  .btn-hamb{
    width:42px; height:42px; display:grid; place-items:center;
    border:0; background:transparent; cursor:pointer; padding:0;
  }
  .btn-hamb .material-symbols-outlined{
    color:#fff; font-size:28px;
    font-variation-settings:'FILL' 0,'wght' 600,'GRAD' 0,'opsz' 24;
  }
  .panel-menu{
    position:absolute; top:100%; right:0; width:min(320px,48vw);
    background:var(--panel); color:#fff; border-radius:0 0 0 20px;
    box-shadow:0 8px 24px rgba(0,0,0,.25);
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity .18s ease, transform .18s ease; padding:16px;
  }
  .menu-wrapper.is-open .panel-menu{ transform:translateY(0); opacity:1; pointer-events:auto; }
  .menu-list{ list-style:none; margin:0; padding:8px 0; }
  .menu-list a, .menu-list .menu-link{
    display:grid; grid-template-columns:22px 1fr; align-items:center; gap:10px;
    width:100%;
    border:0;
    background:transparent;
    color:#fff;
    text-decoration:none;
    text-align:left;
    text-transform:uppercase;
    font-weight:400;
    letter-spacing:.02em;
    padding:12px 12px;
    border-radius:10px;
    cursor:pointer;
  }
  .menu-list a:hover, .menu-list .menu-link:hover{ background:rgba(255,255,255,.08) }
  .menu-list .material-symbols-outlined{ font-size:20px; line-height:1; color:#fff }

  /* Footer */
  .site-footer{ background:var(--panel); margin-top:auto; }
  .site-footer .wrap{
    max-width:none; width:100%; margin:0; padding:0 12px;
  }
  .site-footer p{
    margin:0; padding:10px 0; text-align:center; color:#e8e8e8;
    font-size:13px; letter-spacing:.02em; line-height:1.25;
  }
}

/* componentes */
@layer components{
  /* Botones */
  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    border:0;
    padding:.7rem 1.1rem;
    border-radius:999px;
    background:var(--primary);
    color:#111;
    font-weight:700;
    line-height:1;
    text-transform:uppercase;
    letter-spacing:.6px;
    box-shadow: inset 0 2px 0 rgba(255,255,255,.18), 0 6px 14px rgba(0,0,0,.2);
    transition:transform .08s ease, box-shadow .2s ease, filter .2s ease;
    text-decoration:none;
  }
  .btn:hover{ transform:translateY(-1px); filter:brightness(1.05); }
  .btn:active{ transform:translateY(0); }
  .btn:focus-visible{ outline:3px solid rgba(255,255,255,.65); outline-offset:2px; }

  .btn.btn-sec{
    background:#c8b698; color:#2b1e10; border:2px solid #ffffff40;
  }
  .btn.btn-sec:hover{ filter:brightness(1.03) }

  /* Superficie reutilizable para paneles/tarjetas */
  .surface{
    background:var(--card);
    border-radius:14px;
    box-shadow:0 10px 18px rgba(0,0,0,.18);
  }

  /* Hero (home) */
  .hero{ position:relative; min-height:100vh; display:grid; place-items:center; isolation:isolate; overflow:hidden; }
  .hero-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
  .hero-overlay{ position:absolute; inset:0; background:rgba(0,0,0,.35); z-index:-1; }
  .hero-content{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:18px }
  .logo{ display:flex; flex-direction:column; align-items:center; gap:8px }
  .isotipo{ width:72px; height:72px }
  .logo-title{ font-weight:800; letter-spacing:.06em; font-size:clamp(18px,2.2vw,28px) }
  .logo-sub{ font-weight:500; font-size:clamp(14px,1.6vw,20px); margin-top:-6px }
  .hero-title{ margin:0; font-weight:300; line-height:1.05; font-size:clamp(36px,6.2vw,96px) }
  .hero-title .strong{ font-weight:900 }
  .hero-sub{ margin:0; font-weight:700; font-size:clamp(18px,2.4vw,36px) }
  .cta{ display:flex; gap:20px; flex-wrap:wrap; justify-content:center; margin-top:6px }

  /* Card (destinos) */
  .card{
    background:var(--card);
    color:#fff;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 12px 20px rgba(0,0,0,.18);
    display:flex;
    flex-direction:column;
  }
  .card-img{ height:220px; object-fit:cover; width:100%; }
  .card-body{ padding:22px 18px; display:grid; gap:16px; }
  .card-title{ margin:0; font-size:28px; font-weight:800; }
  .btn.btn-detalles{ padding:14px 32px; }

  /* Modal / Filtros (destinos) */
  .filtros-overlay[hidden]{ display:none }
  .filtros-overlay{ position:fixed; inset:0; z-index:60; display:grid; place-items:start center; padding-top:96px; background:rgba(0,0,0,.55) }
  .filtros-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.55) }
  .filtros-panel{
    position:relative; width:min(860px,94vw); max-height:80vh; overflow:auto;
    background:var(--panel); color:#fff; border-radius:16px;
    box-shadow:0 16px 44px rgba(0,0,0,.45);
    padding:18px 18px 20px;
  }
  .filtros-panel h3{ margin:0 0 10px; font-size:22px; font-weight:900; display:flex; align-items:center; gap:8px }
  .filtros-panel .filtro-item{ display:grid; gap:6px; margin:12px 0 }
  .filtros-panel .range-wrap{ display:grid; grid-template-columns:1fr auto; align-items:center; gap:10px }
  .filtros-panel .filtro-actions{ display:flex; gap:10px; margin-top:10px; flex-wrap:wrap }
  .filtros-panel select, .filtros-panel input[type="range"]{ width:100% }
  .filtros-close{
    position:absolute; right:10px; top:10px; border:0; background:#000a; color:#fff; width:34px; height:34px; border-radius:8px; cursor:pointer;
  }

  .modal[hidden]{ display:none }
  .modal{ position:fixed; inset:0; z-index:40; display:grid; place-items:center; }
  .modal-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.55); }
  .modal-card{
    position:relative; width:min(880px,92vw); max-height:90vh; overflow:auto;
    background:#d2c3a9; color:#2a241a; border-radius:12px; padding:18px;
    display:grid; gap:18px; grid-template-columns:1fr 1fr; box-shadow:0 12px 32px rgba(0,0,0,.45);
  }
  .modal-close{ position:absolute; right:14px; top:14px; border:0; background:#2a241a; color:#fff; width:34px; height:34px; border-radius:6px; cursor:pointer; z-index:1; }
  .modal h3{ grid-column:1/-1; margin:0 0 4px; padding:0 50px 0 0; font-weight:900; }
  .slider{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; }
  .slider-frame img{ width:100%; height:300px; object-fit:cover; border-radius:8px; }
  .slider-prev,.slider-next{ border:0; background:#2a241a; color:#fff; width:34px; height:34px; border-radius:50%; cursor:pointer; }
  .modal-info{ display:grid; gap:10px; }
  .modal-sub{ margin:0; font-size:18px; font-weight:800; }

  .reserva{ display:grid; gap:12px; }
  .reserva-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .reserva-grid label{ display:grid; gap:6px; font-weight:700; font-size:14px; }
  .reserva-grid input{
    background:#ffffff22; color:#2a241a; border:2px solid #2a241a66; border-radius:8px; padding:10px 12px;
  }
  .reserva-actions{ display:flex; flex-direction:column; align-items:stretch; gap:12px; margin-top:4px; }
  .reserva-actions .btn{ width:100%; }
  .reserva-total{ font-weight:800; }
  .btn-reservar{ margin-left:0; }
}

/* pages */
@layer pages{
  .page-head,
  .destinos-head,
  .itinerario-head,
  .contacto-head{
    display:grid;
    grid-template-columns:1fr auto;
    align-items:end;
    gap:16px;
    padding:var(--y-head-top) 0 var(--y-head-bottom-tight);
  }
  .page-title,
  .page-destinos .page-title,
  .page-itinerario .page-title,
  .page-contacto .page-title{
    margin:0;
    font-size:clamp(32px,4.6vw,48px);
    font-weight:900;
  }
  .page-sub,
  .page-destinos .page-sub,
  .page-itinerario .page-sub,
  .page-contacto .page-sub{
    margin:0;
    font-weight:700;
    opacity:.95;
  }

  :is(.page-destinos, .page-itinerario, .page-contacto) .wrap{
    max-width:none;
    width:100%;
    margin:0;
    padding:0 36px;
  }

  /*  Destinos*/
  .page-destinos{ background:var(--beige); color:#fff; }
  .page-destinos .destinos-head{ background:var(--beige); color:#fff; } /* conserva tu look */

  .page-destinos .destinos-actions{ display:flex; align-items:center; gap:10px; }
  .page-destinos .destinos-head :where(.btn, .btn-filtro, .filtro-inline){
    display:inline-flex; align-items:center; gap:8px; margin:0; vertical-align:middle;
  }
  .btn-filtro, .filtro-inline{
    display:inline-flex; align-items:center; gap:8px;
    border:0; background:transparent; color:#fff;
    text-transform:uppercase; font-weight:400; letter-spacing:.04em;
    cursor:pointer; padding:8px 10px; border-radius:10px;
  }
  .btn-filtro .material-symbols-outlined,
  .filtro-inline .material-symbols-outlined{ font-size:20px; }
  .btn-filtro:hover, .filtro-inline:hover{ background:#ffffff1a; }

  .destinos-layout{ display:grid; grid-template-columns:1fr; gap:0; align-items:start; padding-bottom:0; }
  .destinos-grid{
    background:var(--beige);
    padding:12px 0 60px;
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
    gap:36px 28px;
  }
  .destinos-grid.is-single{ grid-template-columns:minmax(0,380px); justify-content:center; }
  .destinos-grid .card{ max-width:380px; width:100%; margin-inline:auto; }

  /* Itinerario*/
  .page-itinerario{ background:var(--beige); color:#fff; }
  .page-itinerario main{ background:var(--beige); }

  .itinerario-head{ padding:40px 0 18px; }

  .page-itinerario main > .wrap:last-of-type{ padding-bottom:72px; }

  .page-itinerario .filtros{
    background:var(--card);
    color:#fff;
    border-radius:10px;
    box-shadow:0 10px 18px rgba(0,0,0,.18);
    padding:18px;
  }
  .page-itinerario .filtros-title{
    display:flex; align-items:center; gap:8px; margin:0 0 10px; font-size:18px; font-weight:800; text-transform:uppercase;
  }
  .page-itinerario b, .page-itinerario strong{ font-weight:400; }

  /* tabla “tarjetitas” */
  #res-list{ width:100%; border-collapse:separate; border-spacing:0 12px; }
  #res-list thead th{ padding:10px; }
  #res-list tbody tr{
    background-color:#c7b69b;
    border-radius:12px;
    box-shadow:0 2px 6px rgba(0,0,0,.15);
  }
  #res-list tbody td{ padding:14px 10px; }
  #res-list tbody tr td:first-child{ border-top-left-radius:12px; border-bottom-left-radius:12px; }
  #res-list tbody tr td:last-child{ border-top-right-radius:12px; border-bottom-right-radius:12px; }
  #res-list tbody button{ margin:0; }

  .itinerario-totalbar{
    display:flex; align-items:center; gap:12px; margin-top:12px; flex-wrap:wrap; margin-bottom:10px;
  }
  #btnVaciarRes{ margin-left:auto; }

  .itinerario-cards .cards-top{ display:flex; gap:1.25rem; margin:.25rem 0 1rem; }
  .itinerario-cards .cards-link{ color:#e7e0d0; opacity:.9; }
  .lista-itinerario{ display:grid; gap:1rem; }

  .it-card{
    display:grid; grid-template-columns:1fr 260px; gap:1rem;
    background:var(--card); color:#fff; border-radius:22px; padding:1.25rem;
    box-shadow:0 10px 24px rgba(0,0,0,.18); align-items:center;
  }
  .it-card.open{ box-shadow:0 14px 28px rgba(0,0,0,.24); }
  .it-card-body{ display:grid; gap:.5rem; }
  .it-card-titulo{ font-size:1.6rem; margin:0 0 .25rem; font-weight:800; }
  .it-card-linea{ margin:0; color:#eee3d2; }

  .it-card-media{ display:flex; justify-content:flex-end; }
  .it-mapa{
    width:240px; height:150px; border:0; border-radius:12px; outline:2px solid rgba(255,255,255,.1);
  }

  .it-card-detalles{
    margin-top:.75rem; padding-top:.75rem; border-top:1px solid rgba(255,255,255,.15);
  }
  .det-grid{
    display:grid; gap:1rem;
    grid-template-columns: repeat(3, minmax(120px, 180px));
    margin-bottom:.75rem;
  }
  .det-grid span{ display:block; font-size:.85rem; color:#e7dccb; opacity:.9; }
  .det-grid strong{ font-size:1.05rem; }
  .det-acciones{ display:flex; gap:.75rem; }

  /* Contacto  */
  .page-contacto{ background:var(--beige); color:#fff; }
  .page-contacto main{ background:var(--beige); }

  /* contacto-head mantiene 1 sola columna */
  .contacto-head{ grid-template-columns:1fr; }

  .page-contacto .wrap{ padding-bottom:var(--y-wrap-bottom); }

  .contacto-layout{
    display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:stretch;
    margin-top:8px;
  }

  /* reutiliza “surface” */
  .contacto-form, .contacto-aside{
    background:var(--card);
    border-radius:14px;
    box-shadow:0 10px 18px rgba(0,0,0,.18);
    padding:24px;
    height:100%;
  }

  .contacto-form{ display:grid; gap:14px; }
  .contacto-form .field{ display:grid; gap:6px; }
  .contacto-form label{ font-weight:700; font-size:14px; }

  .contacto-form input, .contacto-form select{
    width:100%; background:#ffffff14; color:#fff;
    border:2px solid #ffffff66; border-radius:10px; padding:10px 14px; outline:0;
  }
  .contacto-form input::placeholder{ color:#fffc; }

  .contacto-form .field.select{ position:relative; }
  .contacto-form select{
    appearance:none; -webkit-appearance:none; -moz-appearance:none;
    min-height:44px; line-height:1.2; padding-right:44px;
  }
  .contacto-form .field.select::after{
    content:"expand_more"; font-family:"Material Symbols Outlined";
    position:absolute; right:12px; top:50%; transform:translateY(-50%);
    color:#fff; pointer-events:none; font-size:22px;
  }
  .contacto-form select option{ color:#111; background:#fff; }

  .contacto-form .actions{ display:flex; justify-content:center; margin-top:8px; }

  .aside-title{ margin:0; font-size:20px; font-weight:800; letter-spacing:.02em; }
  .contacto-list{ margin:0; padding-left:18px; }
  .contacto-list li{ margin:6px 0; }
  .mapa iframe{
    width:100%; height:360px; border:0; border-radius:10px; box-shadow:0 8px 16px rgba(0,0,0,.2); margin-bottom:6px;
  }
}

/* utilidades */
@layer utilities{
  .mb-20{ margin-bottom:20px; }
  .table-scroll{ overflow:auto; }
  .flex-between{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
  .nowrap{ white-space:nowrap; }
  .empty-msg{
    margin:18px 0; padding:14px 16px; border-radius:10px;
    background:#00000022; color:#fff; font-weight:600;
  }
}

/* media */

/* Mobile header/footer y buscador */
@media (max-width:640px){
  .brand-sub{ display:none; }
  .site-header{ min-height:var(--header-h-mobile); }
  .header-grid{ min-height:var(--header-h-mobile); gap:8px; }

  .brand-title{ font-size:15px; letter-spacing:.04em; }

  .search{
    max-width:130px;
    padding:2px 6px;
    border:1px solid #fff6;
    gap:4px;
  }
  .search input{
    font-size:12px;
    padding:2px;
    min-width:60px;
  }
  .search input::placeholder{ font-size:12px; }
  .search button .material-symbols-outlined{ font-size:18px; }

  .btn-hamb{ width:32px; height:32px; }
}

/* Separación del contenido y footer en CONTACTO (mobile) */
@media (max-width:640px){
  .page-contacto main > .wrap:last-of-type{ padding-bottom:72px; }
  .page-contacto .contacto-layout{ margin-bottom:16px; }
}

/* Itinerario responsivo */
@media (max-width:900px){
  .it-card{ grid-template-columns:1fr; }
  .it-card-media{ justify-content:flex-start; }
  .it-mapa{ width:100%; height:190px; }
  .det-grid{ grid-template-columns:1fr 1fr 1fr; }
}
@media (max-width:520px){
  .det-grid{ grid-template-columns:1fr; }
}

/* Grid contacto */
@media (max-width:1100px){
  .contacto-layout{ grid-template-columns:1fr; }
}

/* Padding interno desktop amplio */
@media (min-width:1200px){
  :is(.page-destinos, .page-itinerario, .page-contacto) .wrap{ padding:0 36px; }
}