/* Páginas internas de soieboudoir.com: el mismo lenguaje que la portada-esfera (negro de Soie, blanco perlado, grises
   fríos; Gilda Display + Raleway; firma en Pinyon Script). Móvil primero; cada bloque cabe en una pantalla. */
:root{--bg:#0A0A0A;--mate:#121212;--ink:#F5F0EB;--dim:#A0A0A0;--dim-2:#6B6F75;--line:rgba(245,240,235,.14);
  --serif:"Gilda Display","Times New Roman",serif;--sans:"Raleway",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;--firma:"Pinyon Script",cursive;
  --pad:clamp(18px,4vw,40px);--ease:cubic-bezier(.22,.61,.36,1);
  --safe-top:env(safe-area-inset-top,0px);--safe-right:env(safe-area-inset-right,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px)}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg)}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:300;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.mini{font-size:10px;letter-spacing:.28em;text-transform:uppercase;font-weight:500;color:var(--dim)}
.t{font-family:var(--serif);font-weight:400}

/* CABECERA Y MENÚ (iguales que en la portada) */
header{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;justify-content:space-between;align-items:flex-start;padding:calc(var(--pad) * .6 + var(--safe-top)) calc(var(--pad) + var(--safe-right)) 10px calc(var(--pad) + var(--safe-left));mix-blend-mode:difference}
.wordmark{font-family:var(--serif);font-size:clamp(15px,1.6vw,20px);letter-spacing:.2em;text-transform:uppercase;line-height:1;color:#fff;text-decoration:none;white-space:nowrap;padding-top:6px}
.menu-btn{display:flex;flex-direction:column;align-items:flex-end;gap:5px;min-width:44px;min-height:44px;padding:8px 0 4px}
.menu-label{font-size:clamp(11px,1.1vw,13px);letter-spacing:.2em;text-transform:uppercase;color:#fff;transition:opacity .35s;font-weight:500}
.bars{position:relative;width:clamp(42px,4.4vw,62px);height:clamp(16px,2vw,22px)}
.bars i{position:absolute;left:0;right:0;top:50%;height:1px;background:#fff;transition:transform .45s var(--ease),width .45s var(--ease),background .3s}
.bars i:first-child{transform:translateY(-5px)}
.bars i:last-child{width:clamp(34px,3.6vw,50px);left:auto;transform:translateY(5px)}
body.menu-open header{z-index:90;mix-blend-mode:normal}
body.menu-open .menu-label{opacity:0}
body.menu-open .bars i{width:100%;background:var(--ink)}
body.menu-open .bars i:first-child{transform:rotate(45deg)}
body.menu-open .bars i:last-child{transform:rotate(-45deg)}
#menu{position:fixed;inset:0;z-index:80;background:#070707;display:grid;place-items:center;clip-path:inset(0 0 100% 0);transition:clip-path .85s var(--ease);pointer-events:none}
body.menu-open #menu{clip-path:inset(0);pointer-events:auto}
#menu nav{display:flex;flex-direction:column;gap:clamp(4px,1vw,10px);text-align:center}
#menu nav a{font-family:var(--serif);font-size:clamp(28px,7vw,64px);line-height:1.1;color:var(--ink);text-decoration:none;opacity:.55;transition:opacity .4s}
#menu nav a:hover,#menu nav a[aria-current]{opacity:1}
#menu .addr{position:absolute;left:calc(var(--pad) + var(--safe-left));right:calc(var(--pad) + var(--safe-right));bottom:calc(var(--pad) + var(--safe-bottom));font-size:12px;color:var(--dim);line-height:1.7}

/* BLOQUES */
main{padding-top:calc(88px + var(--safe-top))}
.bloque{max-width:1080px;margin:0 auto;padding:clamp(40px,9vh,96px) calc(var(--pad) + var(--safe-right)) clamp(40px,9vh,96px) calc(var(--pad) + var(--safe-left))}
.bloque+.bloque{border-top:1px solid var(--line)}
h1.t{font-size:clamp(36px,9vw,72px);line-height:1.04;margin:10px 0 14px}
h2.t{font-size:clamp(28px,7vw,48px);line-height:1.08;margin:8px 0 14px}
.lead{font-family:var(--serif);font-size:clamp(19px,4.6vw,28px);line-height:1.3;max-width:28ch}
.sub,.texto{font-size:14px;line-height:1.75;color:var(--dim);max-width:46ch;margin-top:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 28px;margin-top:26px;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;text-decoration:none;background:linear-gradient(90deg,#F4EBE1,#E6D5C3);color:#0A0A0A;border:0;border-radius:999px;box-shadow:0 0 28px rgba(230,213,195,.35);transition:box-shadow .5s,transform .5s}
.btn:hover,.btn:focus-visible{box-shadow:0 0 55px rgba(244,235,225,.75);transform:scale(1.03)}
.respuesta{font-size:12.5px;color:var(--dim);margin-top:12px}

/* FOTO DE CABECERA (páginas de ciudad: las horizontales 3:2) */
.cabecera-foto{position:relative;height:min(78svh,760px);overflow:hidden;margin-top:calc(-88px - var(--safe-top))}
.cabecera-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.cabecera-foto::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,.45) 0%,rgba(10,10,10,0) 30%,rgba(10,10,10,0) 55%,var(--bg) 100%)}
.cabecera-foto .encima{position:absolute;left:0;right:0;bottom:0;z-index:2;max-width:1080px;margin:0 auto;padding:0 calc(var(--pad) + var(--safe-right)) clamp(24px,5vh,48px) calc(var(--pad) + var(--safe-left))}

/* PORTFOLIO */
.serie{max-width:1280px;margin:0 auto;padding:clamp(32px,7vh,80px) calc(var(--pad) + var(--safe-right)) 0 calc(var(--pad) + var(--safe-left))}
.serie .cab{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:18px}
.serie p{font-size:13px;color:var(--dim)}
.galeria{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media (min-width:900px){.galeria{grid-template-columns:repeat(3,1fr);gap:18px}}
.galeria figure{aspect-ratio:2/3;overflow:hidden;background:var(--mate);border-radius:2px}
.galeria img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.galeria figure:hover img{transform:scale(1.04)}

/* PASOS */
.pasos{list-style:none;margin-top:26px;border-top:1px solid var(--line)}
.pasos li{display:grid;grid-template-columns:44px 1fr;gap:6px 14px;padding:18px 0;border-bottom:1px solid var(--line)}
.pasos .n{font-family:var(--serif);font-size:22px;color:var(--dim)}
.pasos h3{font-family:var(--serif);font-weight:400;font-size:clamp(21px,5vw,28px)}
.pasos p{grid-column:2;font-size:13.5px;line-height:1.7;color:var(--dim)}

/* PAQUETES */
.paquetes{display:grid;gap:14px;margin-top:28px}
@media (min-width:900px){.paquetes{grid-template-columns:repeat(3,1fr);gap:20px}}
.paquete{border:1px solid var(--line);border-radius:24px;padding:24px 24px 26px;background:rgba(18,18,18,.6)}
.paquete .cabeza{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:12px}
.paquete h3{font-family:var(--serif);font-weight:400;font-size:clamp(22px,5vw,28px)}
.paquete .precio{font-size:13px;letter-spacing:.06em;white-space:nowrap}
.paquete ul{list-style:none;font-size:13px;line-height:1.95;color:var(--dim)}
.extra{font-size:13px;color:var(--dim);margin-top:18px}

/* SOBRE MÍ */
.firma{font-family:var(--firma);font-size:clamp(34px,8vw,52px);line-height:1;margin-bottom:6px}
.parrafos p{font-size:15px;line-height:1.8;color:#d9d4cf;max-width:52ch;margin-top:14px}

/* SOIE */
.escena-soie{position:relative;height:min(82svh,820px);overflow:hidden;margin-top:calc(-88px - var(--safe-top))}
.escena-soie video{width:100%;height:100%;object-fit:cover}
.escena-soie::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,.4) 0%,rgba(10,10,10,0) 30%,rgba(10,10,10,0) 50%,var(--bg) 100%)}
.escena-soie .encima{position:absolute;left:0;right:0;bottom:0;z-index:2;max-width:1080px;margin:0 auto;padding:0 calc(var(--pad) + var(--safe-right)) clamp(24px,5vh,48px) calc(var(--pad) + var(--safe-left))}
.precio-soie{font-family:var(--serif);font-size:clamp(22px,5vw,30px);margin-top:16px}

/* FORMULARIO */
.campos{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px;margin-top:26px;max-width:720px}
.campo{display:flex;flex-direction:column;gap:6px}
.campo.ancho{grid-column:1/-1}
.campo label{font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);font-weight:500}
.campo input,.campo select,.campo textarea{appearance:none;-webkit-appearance:none;width:100%;background:transparent;border:0;border-bottom:1px solid rgba(245,240,235,.28);border-radius:0;color:var(--ink);font-family:var(--sans);font-weight:300;font-size:16px;padding:8px 0;min-height:42px;outline:none}
.campo textarea{min-height:70px;resize:vertical}
.campo select option{background:var(--mate)}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-bottom-color:var(--ink)}
.acepto{grid-column:1/-1;display:flex;gap:10px;align-items:flex-start;font-size:12.5px;line-height:1.5;color:var(--dim)}
.acepto input{margin-top:2px;accent-color:#c9c4bf;width:16px;height:16px}
.enviar{grid-column:1/-1;display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.enviar .btn{margin-top:4px}
.enlace{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);border-bottom:1px solid var(--line);padding-bottom:3px;font-weight:500;text-decoration:none}
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.gracias{margin-top:16px;font-size:14px;display:none}
.gracias.ve{display:block}
.btn:disabled{opacity:.5}

/* PREGUNTAS (ciudad) */
.faq{margin-top:22px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);padding:16px 0}
.faq summary{font-family:var(--serif);font-size:clamp(18px,4.4vw,22px);cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq details p{font-size:13.5px;line-height:1.7;color:var(--dim);margin-top:10px}

/* PIE */
footer{border-top:1px solid var(--line);padding:28px calc(var(--pad) + var(--safe-right)) calc(28px + var(--safe-bottom)) calc(var(--pad) + var(--safe-left));display:grid;gap:12px;font-size:11.5px;color:var(--dim-2);line-height:1.8}
footer a{color:var(--dim);text-decoration:none}
footer a:hover{color:var(--ink)}
footer .fila{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline}
footer .mini{color:var(--dim-2)}

@media (max-width:560px){.campos{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.14s!important}}
.solo-horizontal{display:none}
@media (min-aspect-ratio:1/1){.solo-vertical{display:none}.solo-horizontal{display:block}}
.paquete .cabeza:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.paquete:has(.cabeza:last-child){padding:18px 22px}
footer .ciudades-pie{color:var(--dim)}
.galeria figure.ancha{grid-column:span 2;aspect-ratio:auto}
.galeria figure.ancha img{min-height:100%}

/* FECHAS DE VIAJE y CALENDARIO */
.viajes{margin-top:26px;border-top:1px solid var(--line)}
.viaje{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:18px 0;border-bottom:1px solid var(--line);text-decoration:none;transition:padding .4s var(--ease)}
.viaje:hover{padding-left:8px}
.viaje .t{font-size:clamp(22px,5.6vw,30px)}
.viaje .dias{font-size:13px;color:var(--dim);text-align:right}
/* Calendario de reserva (como la referencia de Karen): mes con días de viaje marcados + horas del día elegido */
.agenda{display:grid;gap:18px 28px;margin-top:8px;border:1px solid var(--line);border-radius:24px;padding:20px;background:rgba(18,18,18,.6)}
@media (min-width:760px){.agenda{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);grid-template-areas:"cab horas" "sem horas" "dias horas"}.mes-cab{grid-area:cab}.dias-semana{grid-area:sem}.rejilla-dias{grid-area:dias}.horas{grid-area:horas;border-left:1px solid var(--line);padding-left:24px}}
.mes-cab{display:flex;align-items:center;justify-content:space-between;gap:10px}
.mes-nombre{font-size:20px;text-transform:capitalize}
.flecha{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);font-size:16px;color:var(--ink)}
.flecha:hover{border-color:rgba(245,240,235,.5)}
.dias-semana,.rejilla-dias{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;text-align:center}
.dias-semana span{font-size:10.5px;letter-spacing:.06em;color:var(--dim-2);text-transform:lowercase}
.rejilla-dias button{aspect-ratio:1;width:100%;max-width:46px;margin:0 auto;border-radius:50%;font-size:14px;color:var(--ink);transition:background .25s,color .25s}
.rejilla-dias button:disabled{color:var(--dim-2);opacity:.45;cursor:default}
.rejilla-dias button.viaje{background:rgba(245,240,235,.13);box-shadow:inset 0 0 0 1px rgba(245,240,235,.32)}
.rejilla-dias button.viaje:hover{background:rgba(245,240,235,.24)}
.rejilla-dias button[aria-pressed="true"]{background:linear-gradient(90deg,#F4EBE1,#E6D5C3);color:#0A0A0A;box-shadow:0 0 22px rgba(230,213,195,.4)}
.horas-titulo{font-family:var(--serif);font-size:17px;line-height:1.35;margin-bottom:12px;text-transform:none}
.horas-titulo::first-letter{text-transform:uppercase}
.lista-horas{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
@media (min-width:760px){.lista-horas{grid-template-columns:1fr}}
.lista-horas button{min-height:42px;border:1px solid var(--line);border-radius:999px;font-size:14px;letter-spacing:.04em;color:var(--ink);transition:background .25s,border-color .25s}
.lista-horas button:hover{border-color:rgba(245,240,235,.5)}
.lista-horas button[aria-pressed="true"]{background:linear-gradient(90deg,#F4EBE1,#E6D5C3);color:#0A0A0A;border-color:transparent;box-shadow:0 0 22px rgba(230,213,195,.4)}
.lista-horas button:disabled{opacity:.3;text-decoration:line-through;cursor:default}
.leyenda{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:12px;color:var(--dim);margin-top:10px}
.leyenda span::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:rgba(245,240,235,.35);margin-right:7px;vertical-align:1px}
#otra-btn{margin-top:12px;align-self:flex-start;background:none;cursor:pointer}
.agenda.falta{border-color:#e3b4b4}
.no-disponible{display:none;font-size:13px;color:#e3b4b4;margin-top:8px}
.no-disponible.ve{display:block}
[hidden]{display:none!important}

/* RESEÑAS */
.resenas{display:grid;gap:16px;margin-top:28px}
@media (min-width:900px){.resenas{grid-template-columns:repeat(2,1fr);gap:22px}.resenas.una{grid-template-columns:1fr;max-width:720px}}
.resena{border:1px solid var(--line);border-radius:24px;padding:26px 26px 24px;background:rgba(18,18,18,.6)}
.estrellas{letter-spacing:.3em;font-size:13px;color:var(--ink);margin-bottom:12px}
.resena h3{font-family:var(--serif);font-weight:400;font-size:clamp(20px,4.8vw,26px);line-height:1.2;margin-bottom:10px}
.resena blockquote{font-size:14px;line-height:1.75;color:#d9d4cf}
.resena figcaption{margin-top:14px;font-size:12px;letter-spacing:.06em;color:var(--dim)}
.resena figcaption b{font-weight:500;color:var(--ink)}

/* CONDICIONES (texto legal) */
.texto-legal{max-width:68ch;margin-top:22px}
.texto-legal h2.t{font-size:clamp(22px,5vw,30px);margin:30px 0 12px}
.texto-legal p,.texto-legal li{font-size:14px;line-height:1.8;color:#d9d4cf;margin-top:10px}
.texto-legal ul{list-style:none}
.texto-legal b{font-weight:500;color:var(--ink)}
footer .ciudades-pie a{color:var(--dim-2)}
.acepto a{color:var(--ink)}
/* Que el calendario nunca ensanche el formulario más que la pantalla */
.campos{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media (max-width:560px){.campos{grid-template-columns:minmax(0,1fr)}}
.campo,.agenda,.rejilla-dias,.dias-semana,.lista-horas{min-width:0}
.rejilla-dias button,.lista-horas button{min-width:0;padding:0}
.rejilla-dias button{display:flex;align-items:center;justify-content:center;line-height:1}
.mes-nombre{text-transform:none}
.mes-nombre::first-letter{text-transform:uppercase}

/* PORTFOLIO alineado (Karen, 21-oct): primero las horizontales, luego las verticales, centradas y con el mismo aire.
   Ordenador: verticales a un tercio; horizontales a la mitad; si solo hay una horizontal, mide lo que dos verticales. */
.galeria{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;--g:10px}
@media (min-width:900px){.galeria{gap:18px;--g:18px}}
.galeria figure{flex:0 0 calc((100% - var(--g)) / 2);aspect-ratio:2/3}
.galeria figure.ancha{flex-basis:100%;aspect-ratio:3/2}
@media (min-width:900px){
  .galeria figure{flex-basis:calc((100% - 2 * var(--g)) / 3)}
  .galeria figure.ancha{flex-basis:calc((100% - var(--g)) / 2)}
  .galeria.una-ancha figure.ancha{flex-basis:calc((100% - 2 * var(--g)) / 3 * 2 + var(--g))}
}
.galeria figure.ancha img{min-height:0}

/* Flechita en los desplegables, para que se vea que se puede elegir */
.campo select{padding-right:28px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23F5F0EB' stroke-width='1.4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 4px center;cursor:pointer}
.galeria+.galeria{margin-top:var(--g)}

/* AVISO DE COOKIES: aceptar y rechazar con el mismo peso. Botones de la marca (Karen, 21-oct): ovalados, champán con brillo, en TODA la web */
.aviso-cookies{position:fixed;z-index:400;left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));bottom:max(12px,env(safe-area-inset-bottom,0px));max-width:520px;margin:0 auto;background:rgba(18,18,18,.94);border:1px solid rgba(245,240,235,.14);border-radius:18px;padding:14px 16px 14px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-family:"Raleway",system-ui,sans-serif;font-weight:300;color:#F5F0EB;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.aviso-cookies[hidden]{display:none}
.aviso-cookies p{font-size:12.5px;line-height:1.55;color:#d9d4cf;text-align:center}
.aviso-cookies a{color:#F5F0EB}
.aviso-cookies .botones{display:flex;justify-content:center;gap:12px;margin-top:12px}
.aviso-cookies button{min-height:40px;min-width:118px;padding:0 20px;font:500 10px "Raleway",system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;background:linear-gradient(90deg,#F4EBE1,#E6D5C3);color:#0A0A0A;border:0;border-radius:999px;box-shadow:0 0 28px rgba(230,213,195,.35);transition:box-shadow .5s,transform .5s}
.aviso-cookies button:hover,.aviso-cookies button:focus-visible{box-shadow:0 0 55px rgba(244,235,225,.75);transform:scale(1.03)}
#menu .addr a,footer a[data-config-cookies]{color:inherit}

/* Portfolio en el MÓVIL (Karen, 21-oct): con 3 verticales, la primera grande y las otras dos debajo, en pareja: sin huecos.
   En el ordenador no cambia nada (las 3 en fila). */
@media (max-width:899px){.galeria figure:not(.ancha):first-child:nth-last-child(3){flex-basis:100%}}

/* CABECERA CON FONDO al bajar (Karen, 21-oct: «SOIE BOUDOIR» y «MENÚ» se montaban encima del texto). Arriba del todo
   sigue transparente; en cuanto la página baja, lleva fondo negro difuminado y deja de mezclarse con lo de debajo. */
header{transition:background-color .35s ease,box-shadow .35s ease}
body.con-fondo header{mix-blend-mode:normal;background-color:rgba(10,10,10,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 1px 0 rgba(245,240,235,.06)}
body.con-fondo.menu-open header{background-color:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
/* SIN NADA SOBRE LAS FOTOS (Karen, 21-oct; sustituye al cristal): si lo que pasa por detrás de la cabecera es una FOTO,
   «SOIE BOUDOIR» y «MENÚ» van directamente sobre ella, sin franja ni desenfoque (una sombra casi invisible para que se
   lean en fotos claras). Con fondo negro detrás, la barra negra (con-fondo), que sobre negro no se distingue. */
body.con-cristal header{mix-blend-mode:normal}
body.con-cristal .wordmark,body.con-cristal .menu-label{text-shadow:0 1px 12px rgba(0,0,0,.45)}
body.con-cristal .bars i{box-shadow:0 1px 8px rgba(0,0,0,.45)}
