:root{
    --azul-prof:#16435e;
    --azul:#2b6d92;
    --azul-claro:#5f97b8;
    --celeste:#bcd9e8;
    --hielo:#eef5f9;
    --crema:#faf7f0;
    --verde:#1e4d3d;
    --naranjo:#c8722c;
    --tinta:#22333b;
    --blanco:#ffffff;
    --dorado:#b8923f;
    --dorado-claro:#e3cd9a;
    --sombra:0 10px 30px rgba(22,67,94,.10);
    --sombra-fuerte:0 20px 44px rgba(15,45,64,.18);
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--tinta);background:var(--crema);line-height:1.6}
  h1,h2,h3,.brand{font-family:'Playfair Display',Georgia,serif}
  img{max-width:100%;display:block}
  a{color:var(--azul)}

  /* ---------- Header ---------- */
  header{position:sticky;top:0;z-index:50;background:rgba(250,247,240,.94);backdrop-filter:blur(8px);border-bottom:1px solid #e5ddcd;box-shadow:0 2px 18px rgba(22,67,94,.05)}
  .nav{max-width:1080px;margin:0 auto;display:flex;align-items:center;gap:14px;padding:12px 18px}
  .nav img{width:46px;height:46px;border-radius:50%;box-shadow:0 0 0 2px var(--crema),0 0 0 3px var(--dorado-claro)}
  .brand{font-size:1.35rem;font-weight:800;letter-spacing:.14em;color:var(--verde)}
  .brand small{display:block;font-family:'Inter',sans-serif;font-size:.6rem;letter-spacing:.3em;color:var(--dorado);font-weight:600}
  nav.links{margin-left:auto;display:flex;gap:26px;flex-wrap:wrap}
  nav.links a{position:relative;text-decoration:none;font-weight:600;font-size:.86rem;letter-spacing:.02em;color:var(--azul-prof);padding-bottom:4px}
  nav.links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;background:var(--dorado);transition:right .25s ease}
  nav.links a:hover{color:var(--azul-prof)}
  nav.links a:hover::after{right:0}
  #btn-menu{display:none;margin-left:auto;background:none;border:2px solid var(--celeste);border-radius:10px;width:44px;height:44px;font-size:1.3rem;color:var(--azul-prof);cursor:pointer;line-height:1}
  #menu-movil{display:none;background:var(--crema);border-top:1px solid #e5ddcd;flex-direction:column;padding:6px 0}
  #menu-movil a{text-decoration:none;font-weight:600;color:var(--azul-prof);padding:13px 22px;font-size:1rem;border-bottom:1px solid #efe8da}
  #menu-movil a:last-child{border-bottom:none}
  #menu-movil.abierto{display:flex}
  @media(max-width:640px){
    nav.links{display:none}
    #btn-menu{display:block}
  }

  /* ---------- Hero (glaciar de Cochrane) ---------- */
  .hero{background:linear-gradient(180deg,rgba(22,67,94,.45) 0%,rgba(22,67,94,.55) 60%,rgba(15,45,64,.72) 100%),url("img/img-002-45e6d5a5f8.jpg") center 35%/cover no-repeat;position:relative;overflow:hidden}
  .hero-inner{max-width:1080px;margin:0 auto;padding:56px 18px 120px;display:flex;flex-wrap:wrap;align-items:center;gap:36px;justify-content:center;text-align:center;flex-direction:column}
  .hero img.logo{width:190px;height:190px;border-radius:50%;filter:drop-shadow(0 12px 28px rgba(0,0,0,.45))}
  .hero h1{font-size:clamp(2rem,5vw,3.2rem);color:#fff;font-weight:800;letter-spacing:.01em;max-width:640px;text-shadow:0 2px 18px rgba(10,35,50,.6)}
  .hero p.sub{max-width:560px;font-size:1.06rem;color:#e8f2f8;text-shadow:0 1px 10px rgba(10,35,50,.65)}
  .badge-stock{display:inline-block;background:linear-gradient(135deg,var(--dorado-claro),var(--dorado));color:#3a2c0f;font-weight:700;padding:9px 20px;border-radius:999px;font-size:.92rem;box-shadow:var(--sombra)}
  .hero-cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
  .btn{display:inline-flex;align-items:center;gap:9px;border:none;cursor:pointer;text-decoration:none;font-weight:700;font-size:1rem;letter-spacing:.015em;padding:14px 28px;border-radius:11px;transition:transform .2s ease,box-shadow .2s ease}
  .btn:hover{transform:translateY(-3px)}
  .btn-azul{background:linear-gradient(160deg,#1c5578,var(--azul-prof) 70%);color:#fff;box-shadow:var(--sombra-fuerte)}
  .btn-azul:hover{box-shadow:0 24px 48px rgba(15,45,64,.28)}
  .btn-wsp{background:linear-gradient(160deg,#2be374,#20bd59);color:#fff;box-shadow:0 12px 28px rgba(37,211,102,.32)}
  .btn-wsp:hover{box-shadow:0 20px 38px rgba(37,211,102,.4)}
  .montanas{position:absolute;bottom:-2px;left:0;width:100%;line-height:0}

  /* ---------- Secciones ---------- */
  section{padding:76px 18px}
  .wrap{max-width:1080px;margin:0 auto}
  .sec-title{position:relative;text-align:center;font-size:clamp(1.6rem,3.5vw,2.3rem);color:var(--azul-prof);margin-bottom:20px;padding-bottom:16px;letter-spacing:.01em}
  .sec-title::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:64px;height:2px;background:linear-gradient(90deg,transparent,var(--dorado),transparent)}
  .sec-sub{text-align:center;color:#5a6f7b;max-width:560px;margin:0 auto 40px}

  /* ---------- Productos ---------- */
  #productos{background:var(--crema)}
  .grid-prod{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:24px}
  .card{background:var(--blanco);border-radius:18px;overflow:hidden;box-shadow:var(--sombra);display:flex;flex-direction:column;border:1px solid #eee4d4;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
  .card:hover{transform:translateY(-6px);box-shadow:var(--sombra-fuerte);border-color:var(--dorado-claro)}
  .card .ph{position:relative;background:#fff;overflow:hidden}
  .card .ph img{aspect-ratio:1/1;object-fit:contain;width:100%;transition:opacity .15s ease,transform .4s ease}
  .card:hover .ph img{transform:scale(1.05)}
  .card .cuerpo{padding:18px;display:flex;flex-direction:column;gap:10px;flex:1}
  .card h3{font-size:1.12rem;color:var(--azul-prof)}
  .precio{font-size:1.3rem;font-weight:800;color:var(--verde)}
  .precio small{font-size:.8rem;font-weight:500;color:#7a8a94}
  .precio-antes{text-decoration:line-through;color:#9aa9b1;font-weight:600;font-size:.85rem;margin-right:5px}
  .fila{display:flex;gap:8px;align-items:center}
  select.color{flex:1;padding:9px 10px;border-radius:10px;border:1.5px solid var(--celeste);background:var(--hielo);font-family:inherit;font-size:.88rem;color:var(--tinta)}
  select.color option:disabled{color:#aaa}
  /* Bloque de acción: selector de cantidad + botón agregar (mismo alto, forma de píldora) */
  .card{container-type:inline-size}
  .accion-wrap{display:flex;flex-direction:column;gap:12px;margin-top:auto;padding-top:4px}
  .fila-accion{display:grid;grid-template-columns:1fr;gap:8px}
  /* Selector de talla */
  .tallas{display:flex;flex-direction:column;gap:6px}
  .tallas-label{font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#7a8a94}
  .tallas-opts{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
  .talla{height:36px;padding:0;border-radius:999px;border:1.5px solid rgba(30,77,61,.35);background:var(--blanco);color:var(--verde);font-family:inherit;font-weight:600;font-size:.82rem;cursor:pointer;transition:background-color .15s ease,border-color .15s ease,color .15s ease}
  .talla:hover{border-color:var(--verde)}
  .talla.activa{background:var(--verde);border-color:var(--verde);color:#fff}
  .talla:focus-visible{outline:2px solid var(--dorado);outline-offset:2px}
  .tallas-aviso{display:none;font-size:.8rem;font-weight:600;color:var(--naranjo)}
  .tallas.error .tallas-aviso{display:block}
  .tallas.error .talla:not(.activa){border-color:var(--naranjo)}
  .stepper{display:flex;align-items:center;justify-content:space-between;height:44px;padding:0 4px;border:1.5px solid rgba(30,77,61,.35);border-radius:999px;background:var(--blanco);transition:border-color .2s ease}
  .stepper:hover{border-color:rgba(30,77,61,.6)}
  .stepper button{width:40px;height:100%;border:none;background:none;border-radius:999px;font-family:inherit;font-size:1.3rem;font-weight:500;line-height:1;color:var(--verde);cursor:pointer;transition:color .15s ease,background-color .15s ease}
  .stepper button:hover{color:#122f25}
  .stepper button:active{background:rgba(30,77,61,.08)}
  .stepper span{min-width:28px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums;color:var(--tinta)}
  .btn-add{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 18px;background:var(--verde);color:#fff;border:none;border-radius:999px;font-family:inherit;font-weight:600;font-size:.92rem;letter-spacing:.01em;white-space:nowrap;cursor:pointer;transition:background-color .2s ease,box-shadow .2s ease,transform .15s ease}
  .btn-add svg{width:18px;height:18px;flex:none}
  .btn-add:hover{background:#163a2d;box-shadow:0 8px 18px rgba(30,77,61,.28)}
  .btn-add:active{transform:translateY(1px)}
  .btn-add.ok{background:#2f7a5f}
  .stepper button:focus-visible,.btn-add:focus-visible{outline:2px solid var(--dorado);outline-offset:2px}
  /* Con espacio suficiente (celular, tarjeta ancha) van lado a lado; en tarjetas angostas, apilados */
  @container (min-width:330px){
    .fila-accion{grid-template-columns:auto 1fr}
    .stepper{justify-content:center;gap:2px}
  }
  .card-rica .fila-accion{max-width:440px}

  /* ---------- Tarjeta rica (producto con ficha ampliada) ---------- */
  .card-rica{grid-column:1/-1;padding:0}
  .rica-flex{display:flex;gap:36px;align-items:flex-start;flex-wrap:wrap;padding:28px}
  .card-rica .ds-galeria{flex:1 1 320px;max-width:400px}
  .ds-img-main{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:14px;box-shadow:var(--sombra)}
  .ds-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}
  .ds-thumbs img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:8px;cursor:pointer;border:2px solid transparent;opacity:.65;transition:opacity .15s,border-color .15s}
  .ds-thumbs img:hover{opacity:1}
  .ds-thumbs img.activa{opacity:1;border-color:var(--dorado)}
  .card-rica .ds-info{flex:1 1 320px}
  .card-rica .ds-info h3{font-size:1.3rem;color:var(--azul-prof);margin-bottom:8px}
  .ds-badge{display:inline-block;background:linear-gradient(135deg,var(--dorado-claro),var(--dorado));color:#3a2c0f;font-weight:700;padding:6px 16px;border-radius:999px;font-size:.8rem;margin-bottom:12px}
  .ds-desc{color:#4a6270;margin-bottom:14px;font-size:.98rem;line-height:1.55}
  .ds-features{list-style:none;display:flex;flex-direction:column;gap:8px;color:#39525f;font-size:.94rem;margin-bottom:6px}
  .ds-medidas{color:#7a8a94;font-size:.86rem;margin:10px 0 16px}
  .card-rica .precio{margin-bottom:14px}
  @media(max-width:640px){ .rica-flex{padding:20px} }
  .card-galeria .ph img{aspect-ratio:3/4;object-fit:cover}
  .card-galeria .ds-thumbs{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:1fr;margin:0;padding:10px 14px 0}
  .card-galeria .ds-thumbs img{aspect-ratio:3/4;border-radius:6px}
  .card-galeria .ds-desc{margin-bottom:2px;font-size:.9rem}

  /* ---------- Filtro de categorías ---------- */
  .cat-filtros{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:28px}
  .cat-btn{background:var(--blanco);border:1.5px solid var(--celeste);color:var(--azul-prof);font-weight:600;font-size:.88rem;padding:9px 20px;border-radius:999px;cursor:pointer;transition:all .2s ease}
  .cat-btn:hover{border-color:var(--dorado)}
  .cat-btn.activo{background:var(--azul-prof);border-color:var(--azul-prof);color:#fff}

  /* ---------- Nosotros (valle de Cochrane) ---------- */
  #nosotros{background:linear-gradient(180deg,rgba(238,245,249,.62),rgba(238,245,249,.55)),url("img/img-003-6c06e9fa89.jpg") center/cover no-repeat}
  .panel-nos{background:rgba(250,247,240,.93);border-radius:22px;box-shadow:var(--sombra);padding:36px 30px;backdrop-filter:blur(2px)}
  .nosotros-flex{display:flex;gap:40px;align-items:center;flex-wrap:wrap;justify-content:center}
  .nosotros-flex img{width:170px;height:170px;border-radius:50%}
  .nosotros-txt{max-width:520px;font-size:1.03rem;color:#39525f}
  .nosotros-txt p+p{margin-top:12px}
  .pill-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
  .pill{background:var(--blanco);border:1.5px solid var(--celeste);color:var(--azul-prof);font-weight:600;font-size:.85rem;padding:7px 14px;border-radius:999px;transition:border-color .2s ease,transform .2s ease}
  .pill:hover{border-color:var(--dorado);transform:translateY(-2px)}

  /* ---------- Galería (guanacos de Cochrane) ---------- */
  #galeria{background:linear-gradient(180deg,rgba(22,67,94,.60),rgba(15,45,64,.68)),url("img/img-004-2e7f3b5ca7.jpg") center 30%/cover no-repeat}
  #galeria .sec-title{color:#fff;text-shadow:0 2px 14px rgba(10,35,50,.6)}
  #galeria .sec-sub{color:#dcebf4;text-shadow:0 1px 8px rgba(10,35,50,.6)}
  .grid-gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
  .grid-gal img{border-radius:14px;aspect-ratio:1/1;object-fit:cover;box-shadow:0 10px 26px rgba(0,0,0,.35);border:3px solid rgba(250,247,240,.85);transition:transform .2s}
  .grid-gal img:hover{transform:scale(1.03)}

  /* ---------- Precios + Contacto (río de Cochrane) ---------- */
  .bloque-rio{background:linear-gradient(180deg,rgba(22,67,94,.55),rgba(15,45,64,.72)),url("img/img-005-905723dd31.jpg") center/cover no-repeat}
  .bloque-rio .sec-title{color:#fff;text-shadow:0 2px 14px rgba(10,35,50,.6)}
  .bloque-rio .sec-sub{color:#dcebf4;text-shadow:0 1px 8px rgba(10,35,50,.6)}
  #precios{background:transparent}
  table{width:100%;max-width:640px;margin:0 auto;border-collapse:collapse;background:var(--blanco);border-radius:16px;overflow:hidden;box-shadow:var(--sombra-fuerte)}
  th,td{padding:16px 20px;text-align:left}
  thead{background:linear-gradient(135deg,var(--azul-prof),#0f2d40);color:#fff;letter-spacing:.03em}
  tbody tr:nth-child(even){background:var(--hielo)}
  tbody tr{transition:background .15s ease}
  tbody tr:hover{background:#e4eff5}
  td.p{font-weight:800;color:var(--verde);white-space:nowrap}

  /* ---------- Contacto ---------- */
  .contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px;max-width:820px;margin:0 auto}
  .c-card{background:var(--blanco);border-radius:16px;padding:26px;text-align:center;box-shadow:var(--sombra);border:1px solid #eee4d4;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
  .c-card:hover{transform:translateY(-5px);box-shadow:var(--sombra-fuerte);border-color:var(--dorado-claro)}
  .c-card .ic{font-size:2rem}
  .c-card h3{color:var(--azul-prof);margin:8px 0 6px}
  .c-card p{font-size:.92rem;color:#5a6f7b;margin-bottom:14px}

  /* ---------- Carrito flotante ---------- */
  #barra-carrito{position:fixed;bottom:0;left:0;width:100%;z-index:60;background:var(--azul-prof);color:#fff;padding:12px 18px;display:none;box-shadow:0 -6px 24px rgba(0,0,0,.2)}
  #barra-carrito .in{max-width:1080px;margin:0 auto;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
  #barra-carrito .tot{font-weight:800;font-size:1.05rem}
  #barra-carrito button{margin-left:auto;background:#25d366;border:none;color:#fff;font-weight:700;padding:11px 20px;border-radius:10px;cursor:pointer;font-size:.95rem}

  /* ---------- Modal pedido ---------- */
  #modal{position:fixed;inset:0;background:rgba(15,35,48,.55);z-index:70;display:none;align-items:flex-end;justify-content:center;padding:0}
  #modal.abierto{display:flex}
  .hoja{background:var(--crema);width:100%;max-width:520px;max-height:88vh;overflow:auto;border-radius:22px 22px 0 0;padding:26px 22px 30px}
  @media(min-width:640px){#modal{align-items:center;padding:20px}.hoja{border-radius:22px}}
  .hoja h3{color:var(--azul-prof);font-size:1.4rem;margin-bottom:14px}
  .linea{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px dashed #d8cdb8;font-size:.95rem;align-items:center}
  .linea .qx{color:var(--azul);font-weight:700;white-space:nowrap}
  .linea button.quitar{background:none;border:none;color:#c0392b;cursor:pointer;font-size:1rem}
  .total-row{display:flex;justify-content:space-between;font-weight:800;font-size:1.15rem;padding:14px 0;color:var(--verde)}
  .hoja label{font-size:.85rem;font-weight:600;color:var(--azul-prof);display:block;margin:12px 0 4px}
  .hoja input,.hoja textarea{width:100%;padding:11px;border-radius:10px;border:1.5px solid var(--celeste);background:#fff;font-family:inherit;font-size:.95rem}
  .hoja textarea{resize:vertical;min-height:64px}
  .acciones{display:flex;gap:10px;margin-top:18px}
  .acciones .btn{flex:1;justify-content:center}
  .btn-gris{background:#e4ded2;color:var(--tinta)}
  .nota-envio{font-size:.8rem;color:#7a8a94;margin-top:10px;text-align:center}

  /* ---------- WhatsApp flotante ---------- */
  .wsp-float{position:fixed;bottom:20px;right:16px;z-index:55;width:58px;height:58px;border-radius:50%;background:#25d366;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(37,211,102,.5);transition:bottom .25s ease,transform .15s ease;text-decoration:none}
  .wsp-float:hover{transform:scale(1.08)}
  .wsp-float svg{width:32px;height:32px;fill:#fff}
  body.con-carrito .wsp-float{bottom:88px}

  /* ---------- Preguntas frecuentes ---------- */
  #preguntas{background:var(--crema)}
  .faq{max-width:700px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
  .faq details{background:var(--blanco);border:1px solid #eee4d4;border-radius:14px;box-shadow:var(--sombra);overflow:hidden;transition:box-shadow .2s ease,border-color .2s ease}
  .faq details:hover{box-shadow:var(--sombra-fuerte);border-color:var(--dorado-claro)}
  .faq summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:12px;padding:16px 18px;font-weight:700;color:var(--azul-prof);font-size:.98rem}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:"+";margin-left:auto;font-size:1.4rem;color:var(--naranjo);font-weight:700;transition:transform .2s}
  .faq details[open] summary::after{transform:rotate(45deg)}
  .faq .resp{padding:0 18px 16px;color:#4a6270;font-size:.94rem}

  footer{background:linear-gradient(180deg,var(--azul-prof),#0d2836);color:#cfe3ee;text-align:center;padding:44px 18px 110px;font-size:.9rem;border-top:1px solid rgba(227,205,154,.35)}
  footer img{width:74px;margin:0 auto 12px;opacity:.95;border-radius:50%;box-shadow:0 0 0 2px rgba(15,45,64,.4),0 0 0 3px var(--dorado-claro)}
  footer .fmark{font-family:'Playfair Display',serif;letter-spacing:.22em;font-weight:700;color:#fff;margin-bottom:4px}

  /* ---------- Ajustes por tamaño de pantalla ---------- */
  @media(max-width:640px){
    /* evita que iPhone haga zoom al tocar campos */
    select.color,.hoja input,.hoja textarea{font-size:16px}
  }
  @media(max-width:400px){
    .hero img.logo{width:150px;height:150px}
    .hero-inner{padding:40px 14px 100px;gap:26px}
    section{padding:48px 14px}
    th,td{padding:11px 12px;font-size:.92rem}
    .grid-prod{grid-template-columns:1fr}
  }
  @media(min-width:1400px){
    .wrap,.nav{max-width:1200px}
    .hero-inner{padding:80px 18px 140px}
  }