/* Sueños de Navidad – estilo crayola. Todo cuelga de body.nl */
@font-face{font-family:"Gochi Hand";src:url(../fonts/gochi-hand-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Nunito";font-weight:400;src:url(../fonts/nunito-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Nunito";font-weight:700;src:url(../fonts/nunito-latin-700-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Nunito";font-weight:800;src:url(../fonts/nunito-latin-800-normal.woff2) format("woff2");font-display:swap}

html{scroll-behavior:smooth}
body.nl{--paper:#fff6e3;--tint:#ffeccb;--ink:#2b2a33;--red:#e5484d;--green:#2f9e63;--yellow:#ffc53d;--blue:#3a7bd5;--orange:#f2762e;
  margin:0;background:var(--paper) radial-gradient(rgba(43,42,51,.07) 1px,transparent 1.3px) 0 0/22px 22px;color:var(--ink);
  font:400 1.0625rem/1.55 "Nunito",system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.nl [class*="nl-"],.nl [class*="nl-"]::before,.nl [class*="nl-"]::after{box-sizing:border-box}
.nl-defs{position:absolute;width:0;height:0;overflow:hidden}
.nl [id]{scroll-margin-top:84px}
.nl h1,.nl h2,.nl h3{font-family:"Gochi Hand","Comic Sans MS",cursive;font-weight:400;line-height:1.05;margin:0;color:inherit}
.nl a:focus-visible,.nl button:focus-visible{outline:3px solid var(--blue);outline-offset:3px}

.nl-wrap{width:min(1120px,100% - 2.5rem);margin-inline:auto}
.nl-wrap--narrow{width:min(760px,100% - 2.5rem)}
.nl-center{text-align:center}

/* Botones */
.nl .nl-btn{display:inline-block;background:var(--red);color:#fff;text-decoration:none;font:800 1.1rem/1.2 "Nunito",sans-serif;
  padding:.8em 1.7em;border-radius:999px;box-shadow:0 5px 0 #a9282d;transition:transform .12s,box-shadow .12s;text-align:center;border:3px solid transparent}
.nl .nl-btn:hover{transform:translateY(2px);box-shadow:0 3px 0 #a9282d;color:#fff}
.nl .nl-btn:active{transform:translateY(5px);box-shadow:0 0 0 #a9282d}
.nl .nl-btn--ghost{background:#fff;color:var(--ink);border-color:var(--ink);box-shadow:0 5px 0 var(--ink)}
.nl .nl-btn--ghost:hover{color:var(--ink);box-shadow:0 3px 0 var(--ink)}
.nl .nl-btn--ghost:active{box-shadow:0 0 0 var(--ink)}
.nl .nl-btn--sm{padding:.45em 1.2em;font-size:1rem}

/* Encabezado */
.nl-top{position:sticky;top:0;z-index:30;display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:.6rem 1.25rem;background:rgba(255,246,227,.94);backdrop-filter:blur(6px);border-bottom:3px dashed rgba(43,42,51,.25)}
.nl .nl-brand{display:block;text-decoration:none;color:var(--ink)}
.nl-brand img{height:44px;width:auto}
.nl-brand span{font:400 1.9rem/1 "Gochi Hand",cursive}

/* Portada */
.nl-hero{position:relative;overflow:hidden;padding:clamp(2.2rem,6vw,5rem) 0 clamp(3rem,7vw,6rem)}
.nl-hero__grid{position:relative;z-index:2;display:grid;gap:2.8rem;align-items:center}
@media(min-width:860px){.nl-hero__grid{grid-template-columns:1.1fr .9fr}}
.nl-kicker{margin:0 0 .6rem;font-weight:800;color:var(--green)}
.nl .nl-hero h1{font-size:clamp(3.2rem,12vw,5.6rem);color:var(--ink)}
.nl .nl-hero h1 em{font-style:normal;color:var(--red);display:inline-block;position:relative}
.nl .nl-hero h1 em::after{content:"";position:absolute;left:0;right:0;bottom:-.1em;height:.26em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 12'%3E%3Cpath d='M0 6q10-8 20 0t20 0 20 0 20 0' fill='none' stroke='%23ffc53d' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x center/auto 100%}
.nl .nl-hero h1 span{color:var(--green)}
.nl-lead{font-size:1.25rem;max-width:30rem;margin:1.2rem 0 1rem}
.nl-dates{font-weight:800;margin:0 0 1.6rem;padding-left:1rem;border-left:6px solid var(--yellow)}

.nl-frame{position:relative;max-width:420px;margin-inline:auto;background:#fff;padding:.9rem .9rem 2.8rem;border-radius:6px;transform:rotate(2.5deg);
  box-shadow:0 14px 0 -6px rgba(43,42,51,.12),0 20px 34px rgba(43,42,51,.18)}
.nl-frame::after{content:"";position:absolute;top:-14px;left:50%;width:110px;height:30px;transform:translateX(-50%) rotate(-3deg);background:rgba(255,197,61,.85)}
.nl-frame video,.nl-frame img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:3px;background:var(--tint)}
.nl-frame__empty{aspect-ratio:4/5;display:grid;place-items:center;background:var(--tint);color:var(--green)}
.nl-frame__empty svg{width:42%;height:auto;aspect-ratio:1}

.nl-doodle{position:absolute;z-index:1;width:64px;height:64px;pointer-events:none}
.nl-doodle--1{color:var(--yellow);top:2%;right:6%;transform:rotate(-12deg)}
.nl-doodle--2{color:var(--blue);bottom:8%;left:44%;width:52px;height:52px}
.nl-doodle--3{color:var(--green);top:10%;right:4%;width:74px;height:74px;transform:rotate(8deg)}
.nl-sticker{position:absolute;z-index:1;width:clamp(56px,9vw,110px);height:auto;pointer-events:none}
.nl-sticker{width:clamp(44px,12vw,72px)}
.nl-sticker--1{top:1%;right:3%;transform:rotate(-10deg)}
.nl-sticker--2{top:36%;right:-10px;transform:rotate(8deg)}
.nl-sticker--3{bottom:3%;left:3%;transform:rotate(-4deg)}
.nl-sticker--4{bottom:2%;right:4%;transform:rotate(12deg)}
@media(min-width:860px){
  .nl-sticker{width:clamp(70px,8vw,110px)}
  .nl-sticker--1{top:8%;left:47%;right:auto}
  .nl-sticker--2{top:5%;right:2%}
  .nl-sticker--3{bottom:3%;left:45%}
  .nl-sticker--4{bottom:2%;right:3%}
}

/* Promo */
.nl-promo{background:var(--yellow);padding:1.7rem 0;text-align:center;border-block:3px dashed var(--ink)}
.nl .nl-promo h2{font-size:clamp(1.9rem,5vw,2.7rem)}
.nl-promo p{margin:.4rem auto 0;max-width:36rem;font-weight:800}
.nl-promo .nl-promo__small{font-weight:400;font-size:.95rem}

/* Secciones */
.nl-sec{padding:clamp(3rem,7vw,5.5rem) 0}
.nl-sec--tint{background:var(--tint)}
.nl .nl-h2{font-size:clamp(2.3rem,6.5vw,3.6rem);text-align:center}
.nl-sub{text-align:center;margin:.6rem auto 0;max-width:34rem;font-size:1.1rem}

/* Paquetes */
.nl-grid{display:grid;gap:1.7rem;grid-template-columns:repeat(auto-fit,minmax(235px,1fr));margin-top:2.4rem}
.nl-card{--c:var(--blue);position:relative;background:#fff;padding:1.2rem 1.2rem 1.5rem;border-radius:22px;display:flex;flex-direction:column;gap:.6rem}
.nl-card::before,.nl-book__box::before{content:"";position:absolute;inset:0;border:4px solid var(--c,var(--red));
  border-radius:26px 14px 24px 16px/16px 24px 14px 26px;filter:url(#nl-crayon);pointer-events:none}
.nl-card--green{--c:var(--green)}
.nl-card--orange{--c:var(--orange)}
.nl-card--red{--c:var(--red)}
.nl-card:nth-child(odd){transform:rotate(-.6deg)}
.nl-card:nth-child(even){transform:rotate(.6deg)}
.nl-card__img{border-radius:14px;background:color-mix(in srgb,var(--c) 14%,#fff);display:grid;place-items:center;overflow:hidden;color:var(--c);min-height:120px}
.nl-card__img img{width:100%;height:auto;object-fit:contain}
.nl-card__img svg{width:30%;height:auto;aspect-ratio:1;margin:1.4rem 0}
.nl .nl-card h3{font-size:2rem;color:var(--c)}
.nl-price{margin:0;font:400 3.4rem/1 "Gochi Hand",cursive}
.nl-price span{font:800 1.4rem/1 "Nunito",sans-serif;vertical-align:top;margin-right:.2em;position:relative;top:.35rem}
.nl-badge{align-self:flex-start;margin:0;background:var(--c);color:#fff;font-weight:800;font-size:.9rem;padding:.15em .85em;border-radius:99px}
.nl-card ul{margin:.3rem 0 .9rem;padding-left:1.2rem;flex:1}
.nl-card .nl-btn{align-self:stretch}

.nl-extras{display:grid;gap:1.4rem;margin-top:2.8rem}
@media(min-width:760px){.nl-extras{grid-template-columns:1.2fr 1fr}}
.nl-note{background:#fff;border:3px dashed var(--ink);border-radius:18px;padding:1.3rem 1.5rem}
.nl-note--alt{background:var(--tint)}
.nl .nl-note h3{font-size:1.9rem;margin-bottom:.6rem}
.nl-note p{margin:.4rem 0}
.nl-note dl{margin:0;display:grid;gap:.4rem}
.nl-note dl div{display:flex;justify-content:space-between;gap:1rem;border-bottom:2px dotted rgba(43,42,51,.25);padding-bottom:.25rem}
.nl-note dt,.nl-note dd{margin:0}
.nl-note dd{font-weight:800}

/* Pasos (sí son una secuencia) */
.nl-steps{list-style:none;counter-reset:s;margin:2.2rem 0 0;padding:0;display:grid;gap:1.2rem}
@media(min-width:760px){.nl-steps{grid-template-columns:repeat(3,1fr)}}
.nl-steps li{counter-increment:s;position:relative;background:#fff;border-radius:20px;padding:1.5rem 1.2rem 1.5rem 4.6rem;font-size:1.15rem}
.nl-steps li::before{content:counter(s);position:absolute;left:1rem;top:50%;transform:translateY(-50%) rotate(-6deg);width:2.8rem;height:2.8rem;
  border-radius:50%;background:var(--yellow);border:3px solid var(--ink);display:grid;place-items:center;font:400 1.8rem/1 "Gochi Hand",cursive}

/* Reglas */
.nl-rules{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:.8rem}
.nl-rules li{background:#fff;border-left:8px solid var(--green);border-radius:6px 16px 16px 6px;padding:.8rem 1rem .8rem 1.1rem}
.nl-rules li:nth-child(3n+2){border-left-color:var(--orange)}
.nl-rules li:nth-child(3n){border-left-color:var(--blue)}

/* Reservas */
.nl-book__box{--c:var(--red);position:relative;background:#fff;border-radius:22px;padding:clamp(.6rem,2vw,1.4rem);margin-top:1.8rem;box-shadow:0 8px 0 rgba(43,42,51,.1)}
.nl-help{text-align:center;margin:1.2rem 0 0}
.nl-help a{color:var(--red);font-weight:800}

/* Galería, mapa, recomendaciones */
.nl-gallery{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-top:2rem}
.nl-gallery img{width:100%;aspect-ratio:1;object-fit:cover;background:#fff;padding:.5rem;border-radius:6px;box-shadow:0 8px 20px rgba(43,42,51,.15)}
.nl-gallery img:nth-child(odd){transform:rotate(-1.6deg)}
.nl-gallery img:nth-child(even){transform:rotate(1.4deg)}
.nl-map{aspect-ratio:16/10;border-radius:18px;overflow:hidden;border:4px solid var(--ink);margin:1.6rem 0}
.nl-map iframe{display:block;width:100%;height:100%;border:0}
.nl-rec{width:100%;height:auto;border-radius:18px;margin-top:1.6rem}

/* Pie */
.nl-foot{padding:2rem 0 6rem;text-align:center;border-top:3px dashed var(--ink)}
.nl-foot p{margin:.3rem 0}
.nl .nl-foot a{color:var(--red);font-weight:800;margin:0 .6rem}

/* Botones flotantes */
.nl .nl-float{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));z-index:40;transform:translateX(-50%) translateY(160%);
  background:var(--red);color:#fff;text-decoration:none;font:800 1.05rem/1.2 "Nunito",sans-serif;padding:.85em 1.7em;border-radius:99px;
  box-shadow:0 5px 0 #a9282d,0 12px 24px rgba(0,0,0,.2);transition:transform .25s}
.nl .nl-float.is-on{transform:translateX(-50%)}
@media(min-width:900px){.nl .nl-float{display:none}}
.nl-music{position:fixed;left:14px;bottom:calc(84px + env(safe-area-inset-bottom));z-index:41;background:#fff;border:3px solid var(--ink);
  border-radius:99px;padding:.45em 1em;font:800 .9rem/1.2 "Nunito",sans-serif;color:var(--ink);cursor:pointer}
@media(min-width:900px){.nl-music{bottom:calc(14px + env(safe-area-inset-bottom))}}
.nl-music[aria-pressed="true"]{background:var(--yellow)}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .nl .nl-btn,.nl .nl-float{transition:none}
}

/* Evita desplazamiento horizontal por las tarjetas e imágenes inclinadas */
.nl-sec,.nl-hero,.nl-promo{overflow-x:clip}

/* Iconos de Javier */
.nl-ico{display:inline-block;height:1.1em;width:auto;max-width:2.4em;vertical-align:-.14em;margin:0 .3em;object-fit:contain}
.nl-ico--sm{height:1.2em}
.nl-card__img .nl-card__ico{width:38%;height:auto;max-height:120px;margin:1.2rem 0;object-fit:contain}
.nl-foot__icons{display:flex;justify-content:center;flex-wrap:wrap;gap:.8rem;margin-bottom:1.1rem}
.nl-foot__icons .nl-ico{height:46px;margin:0}

/* Ajustes finos de iconos en celular */
.nl .nl-promo h2{display:flex;align-items:center;justify-content:center;gap:.4rem;font-size:clamp(1.6rem,5vw,2.7rem)}
.nl .nl-promo h2 .nl-ico{height:1em;margin:0}
.nl-hero{padding-top:clamp(3.4rem,6vw,5rem)}

/* Álbum (contenido de la página: bloque Galería de WordPress) */
.nl-album{margin-top:2rem}
.nl-album .wp-block-gallery{display:grid!important;gap:1rem!important;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin:0;padding:0}
.nl-album .wp-block-gallery figure,.nl-album .wp-block-gallery .wp-block-image{margin:0!important;width:auto!important;flex:none!important}
.nl-album figure img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;background:#fff;padding:.5rem;border-radius:6px;box-shadow:0 8px 20px rgba(43,42,51,.15)}
.nl-album figure:nth-child(odd) img{transform:rotate(-1.6deg)}
.nl-album figure:nth-child(even) img{transform:rotate(1.4deg)}
.nl-album figcaption{display:none}
.nl-album>p{text-align:center}
.nl-gallery{margin-top:1.4rem}

/* Banners: fila deslizable, sin recortar */
.nl-banners{display:flex;gap:1.1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:.6rem .2rem 1.2rem;margin-top:1.6rem;-webkit-overflow-scrolling:touch}
.nl-banners img{flex:none;height:min(72vh,520px);width:auto;max-width:86vw;object-fit:contain;border-radius:14px;scroll-snap-align:center;background:#fff;box-shadow:0 8px 20px rgba(43,42,51,.15)}

/* Ajustes: álbum de 2 columnas en celular y banners sin bordes blancos */
.nl-album .wp-block-gallery,.nl-gallery{grid-template-columns:repeat(2,1fr)}
@media(min-width:640px){.nl-album .wp-block-gallery,.nl-gallery{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}}
.nl-banners{align-items:center}
.nl-banners img{width:auto;height:auto;max-height:520px;max-width:86vw;background:transparent}

/* Paquete recomendado y paquete básico discreto */
.nl-card--star{transform:none!important}
@media(min-width:900px){.nl-card--star{transform:scale(1.04)!important;z-index:2}}
.nl-card--star::before{border-width:5px}
.nl-ribbon{position:absolute;top:-16px;right:16px;z-index:3;background:var(--yellow);border:3px solid var(--ink);color:var(--ink);padding:.15em .9em;border-radius:99px;font:800 .9rem/1.3 "Nunito",sans-serif;transform:rotate(3deg)}
.nl-cheap{margin:2.2rem auto 0;max-width:300px;text-align:center}
.nl-cheap summary{cursor:pointer;font-weight:800;text-decoration:underline;list-style:none}
.nl-cheap summary::-webkit-details-marker{display:none}
.nl-cheap[open] summary{margin-bottom:1.2rem}
.nl-cheap__card{text-align:left}
.nl-cheap .nl-card{transform:none}

/* Banners que rotan */
.nl-sec--tight{padding:2rem 0}
.nl-banners{position:relative;scrollbar-width:none}
.nl-banners::-webkit-scrollbar{display:none}
.nl-banners>a{flex:none;display:block;scroll-snap-align:center}
.nl-banners img{display:block}
.nl-extras:has(.nl-note:only-child){grid-template-columns:1fr}

/* Banners: altos en celular; anchos en escritorio (si existen) */
.nl-banners--wide{display:none}
@media(min-width:700px){
  .has-wide .nl-banners--tall{display:none}
  .has-wide .nl-banners--wide{display:flex}
  .nl-banners--wide img{width:min(1000px,86vw);max-height:none}
}

/* Opción: ocultar los banners en celular (config.php: 'banners_celular' => false) */
@media(max-width:699px){.nl-hide-mobile{display:none}}