/* ============================================================
   BoutiqueRoom · Gestión de apartamentos turísticos en València
   Convención de producto, ejecutada a máxima calidad.
   Compromiso de marca declarado por Jaime el 2026-07-28.
   ============================================================ */

@font-face{font-family:'Figtree';src:url('/assets/fonts/figtree.woff2') format('woff2');
  font-weight:300 900;font-style:normal;font-display:swap}
@font-face{font-family:'Noto Sans';src:url('/assets/fonts/notosans.woff2') format('woff2');
  font-weight:300 700;font-style:normal;font-display:swap}

:root{
  /* Fondo cálido de la propuesta 5, azul de marca de la propuesta 2.
     Elección de Jaime, 2026-07-28. Contrastes comprobados sobre el crema. */
  --tinta:#1C1917;          /* 17,1:1 sobre el crema */
  --tinta-2:#5F574E;        /* 6,8:1 */
  --tinta-3:#847A6E;
  --fondo:#FFFBEB;          /* crema cálido: es el papel de toda la web */
  --fondo-2:#FBF5E4;        /* alterna de sección, un punto más tostada */
  --superficie:#FFFFFF;     /* tarjetas y paneles, blanco puro sobre el crema */
  --linea:#EADFC8;
  --linea-2:#D8C9AC;

  --marca:#0C3B4E;          /* 11,5:1 sobre el crema */
  --marca-2:#155873;
  --marca-suave:#E7EEF1;
  --verde:#0E7C5A;          /* 5,0:1 sobre el crema, solo cifras */

  --display:'Figtree',ui-sans-serif,system-ui,sans-serif;
  --fuente:'Noto Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;

  --e1:.5rem; --e2:1rem; --e3:1.75rem; --e4:3rem; --e5:5rem; --e6:7rem;
  --r-xs:2px; --r-s:6px; --r:10px;   /* 999px solo pastilla */
  --ancho:1200px;
  --sombra:0 1px 2px rgba(28,25,23,.05), 0 12px 28px -14px rgba(28,25,23,.16);
  --sombra-alta:0 2px 4px rgba(28,25,23,.06), 0 26px 50px -20px rgba(28,25,23,.22);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:6rem}
body{
  background:var(--fondo);color:var(--tinta);
  font-family:var(--fuente);font-size:1.0625rem;line-height:1.65;
  font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
a{color:var(--marca);text-underline-offset:.18em}
a:hover{color:var(--marca-2)}
::selection{background:var(--marca);color:#fff}
:focus-visible{outline:2px solid var(--marca);outline-offset:3px;border-radius:var(--r-s)}
.cta :focus-visible{outline-color:#fff}

.saltar{position:absolute;left:1rem;top:-4rem;z-index:100;background:var(--tinta);color:#fff;
  padding:.7rem 1.2rem;border-radius:var(--r-s);font-weight:600;transition:top .2s}
.saltar:focus{top:1rem}

.hoja{width:min(100% - 2rem,var(--ancho));margin-inline:auto}
@media(min-width:820px){.hoja{width:min(100% - 4rem,var(--ancho))}}

/* ---------- tipografía ---------- */
h1,h2,h3,h4{font-family:var(--display);font-weight:800;letter-spacing:-.03em;line-height:1.1;text-wrap:balance;color:var(--tinta)}
h1{font-size:clamp(2.3rem,4.8vw,3.85rem);line-height:1.04}
h2{font-size:clamp(1.75rem,3.1vw,2.6rem)}
h3{font-size:clamp(1.12rem,1.6vw,1.32rem);letter-spacing:-.014em;line-height:1.3}
p{text-wrap:pretty}
.plomo{font-size:clamp(1.08rem,1.45vw,1.28rem);line-height:1.6;color:var(--tinta-2);max-width:58ch}
.cuerpo{max-width:68ch}
.cuerpo p+p,.cuerpo ul+p,.cuerpo p+ul,.cuerpo ol+p,.cuerpo p+ol{margin-top:1.15rem}
.cuerpo h2{margin:var(--e4) 0 var(--e2)}
.cuerpo h3{margin:var(--e3) 0 .6rem}
.cuerpo ul,.cuerpo ol{padding-left:1.35rem}
.cuerpo li+li{margin-top:.55rem}
.cuerpo b,.cuerpo strong{font-weight:600;color:var(--tinta)}
.nota{font-size:.88rem;color:var(--tinta-3);max-width:58ch;margin-top:1.1rem;line-height:1.6}

/* ---------- cabecera ---------- */
.cab{position:sticky;top:0;z-index:40;background:rgba(255,251,235,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--linea)}
.cab__fila{display:flex;align-items:center;gap:1.25rem;min-height:68px}
.marca{font-family:var(--display);font-weight:800;font-size:1.1rem;letter-spacing:-.03em;color:var(--tinta);
  text-decoration:none;display:flex;align-items:center;gap:.6rem;white-space:nowrap}
.marca::before{content:"";width:24px;height:24px;border-radius:var(--r-s);flex:0 0 auto;
  background:linear-gradient(150deg,var(--marca-2),var(--marca))}
.nav{display:flex;gap:.15rem;margin-left:auto}
.nav a{display:flex;align-items:center;min-height:44px;padding:0 .85rem;border-radius:var(--r-s);
  font-size:.95rem;font-weight:500;color:var(--tinta-2);text-decoration:none;
  transition:background .16s ease,color .16s ease}
.nav a:hover{background:var(--fondo-2);color:var(--tinta)}
.nav a[aria-current],.nav a[data-seccion]{color:var(--marca);background:var(--marca-suave)}
@media(max-width:900px){.nav{display:none}}
.cab .accion{margin-left:auto}
@media(max-width:430px){
  .cab__accion{padding:0 .9rem;font-size:.88rem;min-height:44px}
  .cab__fila{gap:.75rem}
  .marca{font-size:1rem}
}
@media(min-width:901px){.cab .accion{margin-left:.75rem}}

.indice{display:none}
@media(max-width:900px){
  .indice{display:block;position:sticky;top:69px;z-index:39;background:var(--fondo);
    border-bottom:1px solid var(--linea)}
  .indice__pista{display:flex;gap:.25rem;padding-block:.45rem;overflow-x:auto;
    scrollbar-width:none;overscroll-behavior-x:contain}
  .indice__pista::-webkit-scrollbar{display:none}
  .indice a{flex:0 0 auto;display:flex;align-items:center;min-height:38px;padding:0 .8rem;
    border-radius:999px;font-size:.88rem;font-weight:500;color:var(--tinta-2);
    text-decoration:none;white-space:nowrap}
  .indice a[aria-current],.indice a[data-seccion]{background:var(--marca-suave);color:var(--marca)}
  html{scroll-padding-top:8rem}
}

/* ---------- acciones ---------- */
.accion{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;
  padding:0 1.4rem;border-radius:var(--r-s);border:1px solid transparent;
  background:var(--marca);color:#fff;text-decoration:none;
  font-family:var(--display);font-weight:700;font-size:.95rem;
  white-space:nowrap;cursor:pointer;box-shadow:var(--sombra);
  transition:background .16s ease,transform .16s ease,box-shadow .16s ease;
}
.accion:hover{background:var(--marca-2);color:#fff;transform:translateY(-1px);box-shadow:var(--sombra-alta)}
.accion:active{transform:translateY(0)}
.accion--fantasma{background:var(--superficie);color:var(--tinta);border-color:var(--linea-2);box-shadow:none}
.accion--fantasma:hover{background:var(--fondo-2);color:var(--tinta);border-color:var(--tinta-3)}
.accion--grande{min-height:56px;padding:0 1.9rem;font-size:1.05rem}
@media(max-width:560px){
  .portada__acciones,.cta{--apilado:1}
  .portada__acciones .accion,.cta .accion,.formulario .accion{width:100%}
}

/* ---------- portada ---------- */
.portada{padding:var(--e4) 0 var(--e4);position:relative;overflow:hidden}
.portada::before{content:"";position:absolute;inset:-30% -20% auto -20%;height:70%;z-index:-1;
  background:radial-gradient(60% 60% at 50% 40%,rgba(12,59,78,.06),transparent 70%)}
@media(min-width:940px){.portada{padding:var(--e6) 0 var(--e5)}}
.portada__rejilla{display:grid;gap:var(--e4)}
@media(min-width:1000px){
  .portada__rejilla{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
    gap:var(--e4);align-items:center}
}
.aire{margin-top:2.5rem}
.aire-s{margin-top:1.4rem}
.sin-filete{border-top:0}
.portada__acciones{margin-top:2rem;display:flex;gap:.8rem;flex-wrap:wrap}

/* ---------- panel de producto ---------- */
.panel{background:var(--superficie);border:1px solid var(--linea);border-radius:var(--r);
  box-shadow:var(--sombra-alta);overflow:hidden}
.panel__barra{display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;
  background:var(--fondo-2);border-bottom:1px solid var(--linea)}
.panel__punto{width:9px;height:9px;border-radius:50%;background:var(--linea-2);flex:0 0 auto}
.panel__t{font-size:.88rem;font-weight:600;color:var(--tinta-2);margin-left:.35rem}
.panel__eti{margin-left:auto;font-size:.82rem;font-weight:600;color:var(--tinta-3)}
.panel__cuerpo{padding:1.25rem 1.15rem}

.dato{display:grid;grid-template-columns:1fr auto;gap:.1rem .9rem;align-items:baseline;
  padding:.8rem 0;border-bottom:1px solid var(--linea)}
.dato:last-child{border-bottom:0;padding-bottom:0}
.dato__eti{font-size:.95rem;color:var(--tinta-2)}
.dato__val{font-family:var(--display);font-size:1.35rem;font-weight:800;letter-spacing:-.03em;color:var(--tinta)}
.dato__val--verde{color:var(--verde)}
.dato__pie{grid-column:1/-1;font-size:.82rem;color:var(--tinta-3)}

.panel__sellos{margin-top:1.1rem;padding-top:1.1rem;border-top:1px solid var(--linea)}
.panel__sellos .fila{display:flex;flex-wrap:wrap;gap:.45rem}
.panel__nota{display:block;font-size:.82rem;color:var(--tinta-3);margin-top:.55rem}
.sello{display:inline-flex;align-items:center;gap:.35rem;padding:.28rem .65rem;border-radius:999px;
  background:var(--marca-suave);color:var(--marca);font-size:.82rem;font-weight:600}
.sello::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--marca)}
.sello b{font-weight:400;opacity:.75}

.datos{display:block}
.dato dd{margin:0}
.dato .dato__pie{grid-column:1/-1;font-size:.82rem;color:var(--tinta-3);margin-top:.15rem}

.identidad{margin:1.4rem 0 .4rem;border-top:1px solid var(--linea)}
.identidad>div{display:grid;gap:.1rem .9rem;padding:.75rem 0;border-bottom:1px solid var(--linea)}
@media(min-width:560px){
  .identidad>div{grid-template-columns:11rem minmax(0,1fr);align-items:baseline}
}
.identidad dt{font-weight:700;color:var(--tinta)}
.identidad dd{margin:0;color:var(--tinta-2)}

.dato__val--s{font-size:1.02rem;font-weight:700}
.etiqueta-lista{font-size:.88rem;font-weight:700;color:var(--tinta);margin:1.3rem 0 .5rem}
.lista-marca,.lista-contra{list-style:none;display:grid;gap:.5rem;font-size:.95rem;color:var(--tinta-2)}
.lista-marca li,.lista-contra li{display:grid;grid-template-columns:1.3rem 1fr;align-items:start}
.lista-marca li::before{content:"";width:9px;height:9px;margin-top:.45rem;border-radius:50%;
  background:var(--verde)}
.lista-contra li::before{content:"";width:9px;height:2px;margin-top:.68rem;background:var(--tinta-3)}

.pasos-lista{margin:0;padding-left:1.4rem;display:grid;gap:.7rem}
.pasos-lista li{color:var(--tinta-2);padding-left:.25rem}
.pasos-lista li::marker{color:var(--marca);font-weight:700}

.chip{display:inline-flex;align-items:center;padding:.24rem .6rem;border-radius:999px;
  background:var(--fondo-2);border:1px solid var(--linea-2);
  font-size:.82rem;font-weight:600;color:var(--tinta-2);letter-spacing:0}


/* ---------- secciones ---------- */
.seccion{padding:var(--e5) 0}
.seccion--gris{background:var(--fondo-2);border-block:1px solid var(--linea)}
.seccion--suelta{padding:var(--e5) 0 var(--e4)}
.seccion__cab{margin-bottom:var(--e4);max-width:60ch}
.seccion__cab .plomo{margin-top:1rem}

/* ---------- pasos: fichas sueltas, redondeadas y con sombra de color ---------- */
.pasos{display:grid;gap:1.1rem}
@media(min-width:760px){.pasos{grid-template-columns:repeat(2,1fr)}}
/* Si la última ficha se queda sola en su fila, ocupa el ancho entero.
   Sin esto, cinco fichas en dos columnas dejan medio hueco vacío. */
@media(min-width:760px){.paso:last-child:nth-child(odd){grid-column:1/-1}}

.paso{
  position:relative;background:var(--superficie);
  padding:1.7rem 1.5rem 1.6rem;
  border:1px solid var(--linea);border-radius:16px;
  display:flex;flex-direction:column;gap:.55rem;
  box-shadow:0 1px 2px rgba(12,59,78,.05), 0 14px 30px -18px rgba(12,59,78,.30);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.paso::before{
  content:"";position:absolute;inset:0 0 auto;height:3px;border-radius:16px 16px 0 0;
  background:linear-gradient(90deg,var(--marca),var(--marca-2));opacity:.85;
}
.paso:hover{
  transform:translateY(-3px);border-color:var(--marca-suave);
  box-shadow:0 2px 4px rgba(12,59,78,.06), 0 24px 44px -20px rgba(12,59,78,.42);
}
.paso__n{
  display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;
  min-width:34px;height:30px;padding:0 .7rem;border-radius:999px;
  background:var(--marca);color:#fff;
  font-family:var(--display);font-size:.8rem;font-weight:800;letter-spacing:.02em;
  box-shadow:0 6px 14px -8px rgba(12,59,78,.9);
}
.paso h3{margin-top:.15rem}
.paso p{color:var(--tinta-2);font-size:.95rem}

/* La ficha que ocupa el ancho entero se dispone en horizontal: rótulo y título a la
   izquierda, texto a la derecha. Partir el párrafo en columnas la dejaba coja. */
@media(min-width:900px){
  .paso:last-child:nth-child(odd){
    display:grid;grid-template-columns:minmax(0,20ch) minmax(0,1fr);
    gap:.5rem 3rem;align-items:start;
  }
  .paso:last-child:nth-child(odd) .paso__n{grid-column:1;grid-row:1}
  .paso:last-child:nth-child(odd) h3{grid-column:1;grid-row:2;margin-top:0}
  .paso:last-child:nth-child(odd) p{grid-column:2;grid-row:1/span 2;align-self:center;max-width:62ch}
}

/* ---------- tarjetas ---------- */
.rejilla{display:grid;gap:1.15rem}
@media(min-width:640px){.rejilla{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.rejilla--3{grid-template-columns:repeat(3,1fr)}}
.tarjeta{background:var(--superficie);border:1px solid var(--linea);border-radius:var(--r);
  padding:1.55rem 1.45rem;display:flex;flex-direction:column;gap:.55rem;
  text-decoration:none;color:var(--tinta);transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}
a.tarjeta:hover{border-color:var(--linea-2);box-shadow:var(--sombra);transform:translateY(-2px)}
a.tarjeta:hover h3{color:var(--marca)}
.tarjeta p{color:var(--tinta-2);font-size:.95rem}
.tarjeta__mas{margin-top:auto;padding-top:.7rem;font-size:.95rem;font-weight:600;color:var(--marca)}
.tarjeta--fija{cursor:default}
.tarjeta__fecha{font-size:.82rem;color:var(--tinta-3);font-weight:500}

/* ---------- preguntas ---------- */
.preguntas{border:1px solid var(--linea);border-radius:var(--r);overflow:hidden;background:var(--superficie)}
.pregunta+.pregunta{border-top:1px solid var(--linea)}
.pregunta summary{cursor:pointer;padding:1.15rem 3rem 1.15rem 1.3rem;font-weight:600;
  font-size:1.04rem;list-style:none;position:relative}
.pregunta summary::-webkit-details-marker{display:none}
.pregunta summary:hover{background:var(--fondo-2)}
.pregunta summary::after{content:"";position:absolute;right:1.3rem;top:1.45rem;
  width:9px;height:9px;border-right:2px solid var(--tinta-3);border-bottom:2px solid var(--tinta-3);
  transform:rotate(45deg);transition:transform .18s ease}
.pregunta[open] summary::after{transform:rotate(-135deg);top:1.6rem}
.pregunta__r{padding:0 1.3rem 1.35rem;max-width:70ch;color:var(--tinta-2)}

/* ---------- llamada final ---------- */
.cta{background:var(--marca);color:#fff;padding:var(--e5) 0}
.cta h2{color:#fff}
.cta .plomo{color:rgba(255,255,255,.86);margin-top:1rem}
.cta .accion{background:#fff;color:var(--marca);margin-top:2rem}
.cta .accion:hover{background:var(--marca-suave);color:var(--marca)}

/* ---------- formulario ---------- */
.formulario{background:var(--superficie);border:1px solid var(--linea);border-radius:var(--r);
  box-shadow:var(--sombra);padding:var(--e3)}
.campo{display:block;margin-bottom:1.15rem}
.campo>span{display:block;font-size:.95rem;font-weight:600;color:var(--tinta);margin-bottom:.4rem}
.campo input,.campo select,.campo textarea{
  width:100%;font:inherit;padding:.75rem .85rem;background:var(--superficie);
  border:1px solid var(--linea-2);border-radius:var(--r-s);color:var(--tinta);min-height:48px;
  transition:border-color .16s ease,box-shadow .16s ease}
.campo textarea{min-height:112px;resize:vertical}
.campo select{
  appearance:none;-webkit-appearance:none;padding-right:2.6rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2364748B' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .95rem center;background-size:12px 8px;
}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none;border-color:var(--marca);box-shadow:0 0 0 3px rgba(12,59,78,.16)}
.consentimiento{display:flex;gap:.7rem;align-items:flex-start;font-size:.95rem;
  color:var(--tinta-2);margin-bottom:1.3rem}
.consentimiento input{width:20px;height:20px;margin-top:.22rem;flex:0 0 auto;accent-color:var(--marca)}

/* ---------- migas ---------- */
.migas{font-size:.88rem;color:var(--tinta-3);padding:1.1rem 0 0}
.migas a{color:var(--tinta-3);text-decoration:none}
.migas a:hover{color:var(--marca)}
.migas span{margin:0 .45rem;color:var(--linea-2)}

/* ---------- pie ---------- */
.pie{border-top:1px solid var(--linea);padding:var(--e4) 0 var(--e5);margin-top:0;background:var(--fondo-2)}
.pie__rejilla{display:grid;gap:var(--e3)}
@media(min-width:760px){.pie__rejilla{grid-template-columns:1.5fr 1fr 1fr}}
.pie h4{font-size:.88rem;font-weight:700;color:var(--tinta);margin-bottom:.85rem}
.pie ul{list-style:none}
.pie li+li{margin-top:.45rem}
.pie a{color:var(--tinta-2);text-decoration:none;font-size:.95rem}
.pie a:hover{color:var(--marca)}
.pie__legal{margin-top:var(--e3);padding-top:1.3rem;border-top:1px solid var(--linea);
  font-size:.88rem;color:var(--tinta-3);display:flex;flex-wrap:wrap;gap:.5rem 1.5rem}

.oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- impresión ---------- */
@media print{
  @page{margin:16mm 14mm}
  :root{--tinta:#000;--tinta-2:#333;--tinta-3:#555;--linea:#bbb;--marca:#000}
  body{background:#fff;color:#000;font-size:10.5pt;line-height:1.45}
  .cab,.indice,.migas,.saltar,.portada::before{display:none!important}
  .cta{background:#fff!important;color:#000!important;border-block:1.5pt solid #000;padding:8mm 0}
  .cta h2,.cta .plomo,.cta a{color:#000!important}
  .accion{background:#fff!important;color:#000!important;border:1.5pt solid #000;box-shadow:none;
    padding:2mm 4mm;min-height:0}
  .accion::after{content:" (" attr(href) ")";font-size:8pt;color:#444}
  .panel,.formulario,.tarjeta,.preguntas{box-shadow:none;border:1pt solid #000;break-inside:avoid}
  .paso,.dato,.pregunta{break-inside:avoid}
  h2,h3{break-after:avoid}
  p{orphans:3;widows:3}
  h1{font-size:22pt} h2{font-size:15pt} h3{font-size:11.5pt}
  .plomo{font-size:11.5pt;color:#000}
  .cuerpo{max-width:none}
  .cuerpo a[href^="/"]::after,.cuerpo a[href^="http"]::after{
    content:" (" attr(href) ")";font-size:8pt;color:#444}
  .pregunta__r{display:block!important}
  .pregunta summary::after{display:none}
  .seccion,.seccion--suelta,.portada{padding:6mm 0}
  .seccion--gris{background:#fff!important}
  .pie{background:#fff;border-top:1.5pt solid #000;padding:4mm 0 0}
  .pie__rejilla{grid-template-columns:1fr}
  .pie__rejilla>div:not(:first-child){display:none}
}