:root{
  --fondo:#FFFFFF;
  --fondo2:#FAF7F2;
  --beige:#ECDFCA;
  --tinta:#2A2320;
  --suave:#564C45;
  --linea:#E6DED2;
  --lima:#A8BC12;
  --lima-puro:#C3D726;
  --fucsia:#C5197D;
  --luto:#241D19;
  --luto-txt:#EDE6DD;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --fondo:#15120F; --fondo2:#1C1815; --linea:#332B24;
    --tinta:#F3EEE7; --suave:#B5AAA0;
    --lima:#C3D726; --fucsia:#EC5AA6;
    --luto:#0F0C0A;
  }
}
:root[data-theme="dark"]{
  --fondo:#15120F; --fondo2:#1C1815; --linea:#332B24;
  --tinta:#F3EEE7; --suave:#B5AAA0;
  --lima:#C3D726; --fucsia:#EC5AA6;
  --luto:#0F0C0A;
}

*{box-sizing:border-box}
body{margin:0;background:var(--fondo);color:var(--tinta);
     font-family:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
     font-weight:300;font-size:16px;line-height:1.65;
     -webkit-font-smoothing:antialiased}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit}

h1,h2,h3{font-family:'Lora',Georgia,'Times New Roman',serif;font-weight:600;
         text-wrap:balance;margin:0;letter-spacing:-.01em}
h1{font-size:clamp(2.3rem,4.6vw,4rem);line-height:1.08}
h2{font-size:clamp(1.7rem,2.7vw,2.6rem);line-height:1.15}
h3{font-size:1.3rem;line-height:1.25}
p{margin:0}

.eyebrow{font-size:.72rem;font-weight:500;letter-spacing:.19em;
         text-transform:uppercase;color:var(--fucsia)}

/* ---------------------------------------------------------- barra */
.barra{position:sticky;top:0;z-index:40;display:flex;align-items:center;
       gap:1.5rem;padding:.9rem clamp(16px,4vw,56px);
       background:color-mix(in srgb,var(--fondo) 88%,transparent);
       backdrop-filter:blur(10px);border-bottom:1px solid var(--linea)}
.marca{font-family:'Lora',serif;font-size:1.45rem;font-weight:700;
       text-decoration:none;letter-spacing:-.02em;color:var(--lima)}
.marca b{color:var(--fucsia);font-weight:700}
.menu{display:flex;gap:1.3rem;margin-left:auto;font-size:.92rem}
.menu a{text-decoration:none;color:var(--suave);padding-bottom:2px;
        border-bottom:1.5px solid transparent;transition:color .18s,border-color .18s}
.menu a:hover{color:var(--tinta);border-bottom-color:var(--lima-puro)}
.menu a.aqui{color:var(--tinta);border-bottom-color:var(--fucsia)}
.idioma{font-size:.78rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
        text-decoration:none;color:var(--suave);border:1px solid var(--linea);
        padding:.4rem .7rem;border-radius:3px;white-space:nowrap}
.idioma:hover{color:var(--tinta);border-color:var(--tinta)}

/* El menu del movil. Va con <details>, sin JavaScript: no se puede romper. */
.movil{display:none}
.movil>summary{list-style:none;cursor:pointer;padding:.55rem .35rem;display:block}
.movil>summary::-webkit-details-marker{display:none}
.movil>summary>span,
.movil>summary>span::before,
.movil>summary>span::after{display:block;width:22px;height:2px;background:var(--tinta);
                           border-radius:2px;transition:transform .2s}
.movil>summary>span{position:relative}
.movil>summary>span::before{content:"";position:absolute;top:-7px}
.movil>summary>span::after{content:"";position:absolute;top:7px}
.movil[open]>summary>span{background:transparent}
.movil[open]>summary>span::before{transform:translateY(7px) rotate(45deg)}
.movil[open]>summary>span::after{transform:translateY(-7px) rotate(-45deg)}
.movil>nav{position:absolute;left:0;right:0;top:100%;background:var(--fondo);
           border-bottom:1px solid var(--linea);display:flex;flex-direction:column;
           box-shadow:0 14px 26px rgba(0,0,0,.09)}
.movil>nav a{padding:.95rem clamp(16px,4vw,56px);text-decoration:none;color:var(--tinta);
             border-top:1px solid var(--linea);font-size:1rem}
.movil>nav a.aqui{color:var(--fucsia);font-weight:500}
.wa{text-decoration:none;background:var(--fucsia);color:#fff;font-size:.88rem;
    font-weight:500;padding:.55rem 1.15rem;border-radius:3px;white-space:nowrap}
.wa:hover{filter:brightness(1.08)}

/* ---------------------------------------------------------- botones */
.botones{display:flex;flex-wrap:wrap;gap:.7rem}
.boton{display:inline-block;text-decoration:none;font-size:.95rem;font-weight:500;
       padding:.8rem 1.6rem;border-radius:3px;background:var(--fucsia);color:#fff;
       border:1.5px solid var(--fucsia);transition:filter .18s,border-color .18s}
.boton:hover{filter:brightness(1.08)}
.boton.fantasma{background:transparent;color:var(--tinta);border-color:var(--linea)}
.boton.fantasma:hover{border-color:var(--tinta);filter:none}
.boton.claro{background:var(--luto-txt);color:var(--luto);border-color:var(--luto-txt)}
.boton.fantasma.claro{background:transparent;color:var(--luto-txt);
                      border-color:color-mix(in srgb,var(--luto-txt) 38%,transparent)}
.boton.fantasma.claro:hover{border-color:var(--luto-txt)}

/* ---------------------------------------------------------- hero */
.hero{display:grid;grid-template-columns:1.02fr .98fr;align-items:center;
      gap:clamp(24px,5vw,72px);
      padding:clamp(40px,6vw,88px) clamp(16px,4vw,56px) clamp(32px,5vw,72px);
      max-width:1320px;margin:0 auto}
.hero-txt{display:flex;flex-direction:column;gap:1.5rem;max-width:34rem}
.hero h1{margin-top:.4rem}
.entradilla{font-size:1.12rem;color:var(--suave);max-width:30rem}
.jura{font-size:.86rem;color:var(--suave);border-left:2.5px solid var(--lima-puro);
      padding-left:.9rem;max-width:28rem}
.hero-foto{aspect-ratio:4/4.65;max-width:100%;border-radius:4px;overflow:hidden;
           background:var(--beige)}

/* ---------------------------------------------------------- secciones */
.seccion{max-width:1320px;margin:0 auto;
         padding:clamp(40px,5.5vw,80px) clamp(16px,4vw,56px)}
.titular{max-width:44rem;margin-bottom:clamp(28px,3.5vw,48px);
         display:flex;flex-direction:column;gap:.7rem}
.titular p{color:var(--suave);font-size:1.05rem;max-width:36rem}

.caminos{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(16px,2vw,28px)}
.camino{grid-column:span 2;text-decoration:none;display:flex;flex-direction:column;
        gap:.9rem;transition:transform .22s}
.camino:nth-child(4),.camino:nth-child(5){grid-column:span 3}
.camino:hover{transform:translateY(-3px)}
.camino-foto{aspect-ratio:4/4.3;border-radius:4px;overflow:hidden;background:var(--beige)}
.camino:nth-child(4) .camino-foto,
.camino:nth-child(5) .camino-foto{aspect-ratio:16/10}
.camino-pie{display:flex;flex-direction:column;gap:.25rem}
.cuenta{font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;color:var(--lima)}
.cuenta .euro{color:var(--fucsia);margin-left:.35rem}
.camino-pie p{font-size:.93rem;color:var(--suave)}
.camino:hover h3{color:var(--fucsia)}

/* ---------------------------------------------------------- la isla */
.isla{background:var(--fondo2);max-width:none}
.isla > *{max-width:1320px;margin-left:auto;margin-right:auto}
.nombres{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(14px,1.6vw,22px)}
.nombre{margin:0;display:flex;flex-direction:column;gap:.6rem}
.nombre-foto{aspect-ratio:4/4.65;border-radius:4px;overflow:hidden;background:var(--beige)}
.nombre figcaption{display:flex;flex-direction:column;gap:.1rem;
                   border-top:2px solid var(--lima-puro);padding-top:.6rem}
.sitio{font-family:'Lora',serif;font-size:1.32rem;font-weight:600;line-height:1.15}
.tipo{font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:var(--suave)}

/* ---------------------------------------------------------- luto */
.luto{background:var(--luto);color:var(--luto-txt);
      display:grid;grid-template-columns:1fr 1fr;align-items:center;
      gap:clamp(24px,5vw,72px);
      padding:clamp(44px,6vw,88px) clamp(16px,4vw,56px)}
.luto-txt{max-width:34rem;margin-left:auto;display:flex;flex-direction:column;gap:1.3rem}
.luto .eyebrow{color:var(--lima-puro)}
.luto p{color:color-mix(in srgb,var(--luto-txt) 78%,transparent)}
.luto-foto{aspect-ratio:4/3.4;max-width:560px;border-radius:4px;overflow:hidden;
           background:var(--beige)}

/* ---------------------------------------------------------- tienda */
.tienda{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;
        gap:clamp(24px,5vw,64px)}
.tienda-foto{aspect-ratio:3/2.3;border-radius:4px;overflow:hidden;background:var(--beige)}
.tienda-txt{display:flex;flex-direction:column;gap:1.15rem;max-width:32rem}
.tienda-txt p{color:var(--suave)}
.tienda-txt .boton{align-self:flex-start;margin-top:.3rem}

/* ---------------------------------------------------------- opiniones */
.marcador{font-size:.95rem;color:var(--suave);margin-top:.4rem}
.marcador b{color:var(--lima);font-weight:600;font-size:1.05rem}
.marcador a{color:var(--fucsia);text-decoration:none;
            border-bottom:1px solid currentColor}
.rejilla-op{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,34px)}
.opinion{margin:0;display:flex;flex-direction:column;gap:.7rem;
         border-top:2px solid var(--lima-puro);padding-top:1rem}
.estrellas{color:#E8A80B;font-size:.95rem;letter-spacing:.09em;line-height:1}
.opinion blockquote{margin:0;font-family:'Lora',serif;font-size:1rem;line-height:1.55;
                    color:var(--tinta)}
.opinion figcaption{margin-top:auto;padding-top:.4rem;font-size:.8rem;font-weight:500;
                    letter-spacing:.11em;text-transform:uppercase;color:var(--suave)}
.opinion .trad{display:block;font-size:.64rem;font-weight:400;letter-spacing:.09em;
               opacity:.7;margin-top:.2rem}

/* ---------------------------------------------------------- preguntas */
.faq{background:var(--fondo2);max-width:none}
/* 1208px = los 1320 de .seccion menos su padding: asi el titulo y la lista de
   preguntas arrancan en la misma vertical que el resto de la pagina. La lista
   se queda a la izquierda, sin centrar, pero alineada con todo lo demas. */
.faq > *{max-width:1208px;margin-left:auto;margin-right:auto}
.faq > .preguntas{max-width:48rem;margin-right:0;
      margin-left:max(0px, calc((100% - 1208px) / 2));
      border-top:1px solid var(--linea)}
.pregunta{border-bottom:1px solid var(--linea)}
.pregunta>summary{list-style:none;cursor:pointer;padding:1.1rem 2.2rem 1.1rem 0;
                  position:relative;font-family:'Lora',serif;font-size:1.12rem;
                  font-weight:600;color:var(--tinta)}
.pregunta>summary::-webkit-details-marker{display:none}
.pregunta>summary::after{content:"";position:absolute;right:.5rem;top:1.55rem;
                         width:11px;height:11px;border-right:2px solid var(--fucsia);
                         border-bottom:2px solid var(--fucsia);
                         transform:rotate(45deg);transition:transform .2s}
.pregunta[open]>summary::after{transform:rotate(-135deg);top:1.8rem}
.pregunta>p{padding:0 2.2rem 1.3rem 0;color:var(--suave);max-width:40rem}

/* ---------------------------------------------------------- practico */
.practico{padding-top:0}
.datos{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,36px);
       margin:0;border-top:1px solid var(--linea);padding-top:clamp(24px,3vw,40px)}
.dato dt{font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;
         color:var(--lima);margin-bottom:.5rem}
.dato dd{margin:0;font-size:.97rem;color:var(--suave);line-height:1.7}

/* ---------------------------------------------------------- interior */
.cabecera{max-width:1320px;margin:0 auto;
          padding:clamp(40px,5.5vw,76px) clamp(16px,4vw,56px) 0;
          display:flex;flex-direction:column;gap:1rem}
.cabecera .lema{font-family:'Lora',serif;font-style:italic;font-size:1.35rem;
                color:var(--tinta);max-width:34rem;margin-top:.2rem}
.cabecera .desde{font-size:.78rem;font-weight:500;letter-spacing:.15em;
                 text-transform:uppercase;color:var(--fucsia)}
.cabecera .intro{color:var(--suave);max-width:38rem;font-size:1.02rem}
.cabecera .intro b{font-weight:500;color:var(--tinta)}

.urgente{margin-top:1rem;padding:1.15rem 1.4rem;border:1px solid var(--linea);
         border-left:3px solid var(--fucsia);border-radius:3px;
         display:flex;flex-wrap:wrap;align-items:center;gap:1rem;
         background:var(--fondo2);max-width:44rem}
.urgente p{font-size:.97rem;margin-right:auto}

h2.bloque{font-size:1.45rem;margin-bottom:1.4rem;padding-bottom:.6rem;
          border-bottom:1px solid var(--linea)}
h2.bloque + .rejilla{margin-bottom:clamp(36px,4vw,60px)}

.rejilla{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.2vw,32px)}
.ficha{display:flex;flex-direction:column;gap:.4rem;height:100%}
.ficha-foto{aspect-ratio:4/4.65;border-radius:4px;overflow:hidden;
            background:var(--beige);margin-bottom:.5rem}
.ficha h3{font-size:1.12rem;font-weight:700;letter-spacing:-.005em}
.ficha h3.solo{font-size:1rem;font-weight:400;line-height:1.4;color:var(--tinta)}
.ficha .desc{font-size:.9rem;color:var(--suave);line-height:1.55}
.ficha .spec{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
             color:var(--lima)}
.pedir{margin-top:auto;padding-top:.6rem;align-self:flex-start;text-decoration:none;
       font-size:.76rem;font-weight:500;letter-spacing:.11em;text-transform:uppercase;
       color:var(--fucsia);border-bottom:1.5px solid currentColor;padding-bottom:1px}
.pedir:hover{color:var(--tinta)}
.extra{padding-top:0}
.extra h2.bloque{font-size:1.2rem}

.luto-pag .cabecera .lema{color:var(--suave);font-style:normal;font-size:1.2rem}

/* ---------------------------------------------------------- pie */
.pie{background:var(--fucsia);color:#fff;
     padding:clamp(40px,5vw,72px) clamp(16px,4vw,56px) clamp(28px,3vw,44px)}
.pie-marca{font-family:'Lora',serif;font-size:2rem;font-weight:700;
           letter-spacing:-.02em;max-width:1320px;margin:0 auto 2rem;
           color:var(--lima-puro)}
.pie-marca b{color:#fff}
.pie-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px);
          max-width:1320px;margin:0 auto;font-size:.95rem;line-height:1.8}
.pie-cols .k{display:block;font-size:.72rem;letter-spacing:.15em;
             text-transform:uppercase;opacity:.75;margin-bottom:.45rem}
.pie-cols a{display:block;text-decoration:none;border-bottom:1px solid transparent;
            width:fit-content}
.pie-cols a:hover{border-bottom-color:currentColor}
.pie-nota{max-width:1320px;margin:2.6rem auto 0;padding-top:1.2rem;
          border-top:1px solid rgba(255,255,255,.28);font-size:.82rem;opacity:.85}

:focus-visible{outline:2.5px solid var(--lima-puro);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------------------------------------------------------- estrecho */
@media (max-width:1180px){ .menu{gap:.9rem;font-size:.85rem} }
@media (max-width:1040px){
  .menu{display:none}
  .movil{display:block;margin-left:auto}
  .nombres{grid-template-columns:repeat(3,1fr)}
  .datos,.rejilla,.rejilla-op{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
  .hero,.luto,.tienda{grid-template-columns:1fr}
  .hero-foto,.luto-foto{max-width:520px}
  .luto-txt{margin-left:0}
  .tienda-foto{order:-1}
  .caminos{grid-template-columns:repeat(2,1fr)}
  .camino,.camino:nth-child(4),.camino:nth-child(5){grid-column:span 1}
  .camino:nth-child(4) .camino-foto,
  .camino:nth-child(5) .camino-foto{aspect-ratio:4/4.3}
  .pie-cols{grid-template-columns:1fr}
}
@media (max-width:520px){
  .nombres{grid-template-columns:repeat(2,1fr)}
  .caminos,.datos,.rejilla-op{grid-template-columns:1fr}
  .barra{gap:.7rem}
  .idioma{padding:.35rem .5rem;font-size:.72rem}
}