/* ==========================================================================
   NOMA · Cotizador y acceso
   09/09/2026

   cotizadorv4.php y indexDialog.php eran las dos últimas páginas con el diseño
   viejo: Montserrat, Playfair y css/style.css. Ahora usan noma-web.css como
   todo el resto del sitio, y acá va sólo lo que es propio de ellas.

   Esta hoja NO redefine nada del sitio: se apoya en sus variables (--papel,
   --oro, --texto, --ease…) y en su barra y su pie. Si mañana cambia la paleta,
   estas dos páginas cambian solas.

   Los nombres de clase son los que ya traía el marcado (.precio-card,
   .slider-enganche, .btn-apartar2…). No se renombró ninguno a propósito: el
   formulario y su JavaScript quedaron intactos, y renombrar por prolijidad
   habría sido tocar lo que funciona.
   ========================================================================== */

/* El ancho de lectura del sitio. Lo traía css/style.css y se fue con ella. */
.cotizador .container,
.acceso .container{width:var(--shell);margin-inline:auto}

/* --- El hero -----------------------------------------------------------------
   Mismo gesto que el hero de tipologías o del yacht club: foto a sangre, velo
   oscuro y el título encima. Antes eran 100vh con la palabra "Cotizador" en
   letras huecas; acá es una banda más baja, porque lo que importa está abajo y
   hacer scrollear una pantalla entera para llegar al precio es cobrarle al
   visitante un peaje que no pidió.
   -------------------------------------------------------------------------- */
.cotizador-hero{position:relative}
.cotizador-hero-image{
  position:relative;
  min-height:clamp(300px,46vh,440px);
  display:flex;align-items:flex-end;
  background-size:cover;background-position:center;
  padding:clamp(2rem,5vw,4rem) 0 clamp(2.2rem,5vw,3.4rem);
}
/* El velo carga abajo, que es donde se apoya el texto, y deja el cielo limpio
   arriba. La barra fija ya trae su propio fondo, así que arriba alcanza con un
   asentado corto. */
.cotizador-hero-overlay{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(9,18,28,.62) 0%,rgba(9,18,28,.26) 32%,
    rgba(9,18,28,.55) 74%,rgba(9,18,28,.82) 100%);
}
.cotizador-hero-content{
  position:relative;z-index:1;
  width:var(--shell);margin-inline:auto;color:var(--claro);
}
/* La chapita de la vista. Es el mismo rótulo en versalitas y oro del resto del
   sitio, con un punto adelante que dice "esto es un estado, no un título". */
.hero-view-badge{
  display:inline-flex;align-items:center;gap:.6rem;
  margin-bottom:1rem;padding:.42rem .9rem;
  border:1px solid rgba(224,205,159,.42);border-radius:999px;
  font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--oro-claro);
  background:rgba(9,18,28,.34);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.hero-view-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--oro-claro);flex:0 0 auto;
}
.cotizador-hero .hero-title{
  margin:0;
  font-size:clamp(2.4rem,6vw,4.6rem);font-weight:200;line-height:1.02;
  letter-spacing:-.01em;color:var(--claro);
}
.cotizador-hero .hero-subtitle{
  margin:.7rem 0 0;max-width:44ch;
  font-size:clamp(.98rem,1.5vw,1.15rem);font-weight:300;
  color:var(--claro-suave);
}

/* --- El cuerpo ------------------------------------------------------------ */
.cotizador{
  background:#f6f1e5;background:var(--papel);
  padding:clamp(3rem,7vw,6rem) 0 clamp(4rem,9vw,7rem);
  color:var(--texto);
}

/* --- Las pestañas de vista ---------------------------------------------------
   Dos tarjetas, no dos pestañas de navegador. La activa se marca con el filete
   de oro arriba, que es el mismo gesto con el que el menú dice dónde estás.
   -------------------------------------------------------------------------- */
.tabs-label{
  margin:0 0 1rem;
  font-size:.64rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--oro-hondo);
}
.tabs-buttons{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--linea);
  border:1px solid var(--linea);border-radius:var(--r);
  overflow:hidden;margin-bottom:clamp(2.4rem,5vw,3.6rem);
}
.tab-button{
  position:relative;
  display:flex;align-items:center;gap:.9rem;
  padding:clamp(1rem,2.2vw,1.5rem) clamp(1rem,2.4vw,1.7rem);
  background:var(--papel-2);color:var(--texto-suave);
  text-decoration:none;
  transition:background .35s var(--ease),color .35s var(--ease);
}
.tab-button::before{
  content:'';position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--oro-hondo);
  transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease);
}
.tab-button:hover{background:#f2ecdd;color:var(--texto)}
.tab-button.active{background:var(--papel);color:var(--texto)}
.tab-button.active::before{transform:scaleX(1)}
.tab-button:focus-visible{outline:2px solid var(--oro-hondo);outline-offset:-3px}
/* Los emojis 🏞️ y 🌊 que traía el marcado se esconden: cada sistema los dibuja
   a su manera —en Windows salen planos y en iOS de colores— y en una página que
   por lo demás es tipografía y oro, cantan. La pestaña activa ya se distingue
   por el filete de oro de arriba y por el fondo. Si el cliente los quiere de
   vuelta, es borrar este display:none; el marcado sigue intacto. */
.tab-icon{display:none}
.tab-text{display:flex;flex-direction:column;gap:.25rem;min-width:0}
.tab-title{
  font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:inherit;
}
.tab-desc{font-size:.82rem;color:var(--texto-suave);line-height:1.4}
.tab-content{display:none}
.tab-content.block{display:block}

/* --- Las tarjetas del precio y del plan -----------------------------------
   Dos columnas en escritorio y una abajo de la otra en celular. El borde es un
   filete y no una caja con sombra: el sitio no usa sombras en el papel.
   -------------------------------------------------------------------------- */
.cotizador-content-wrapper{display:grid;gap:clamp(1.2rem,2.6vw,1.8rem)}
.flex-cotizador2{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(1.2rem,2.6vw,1.8rem);
}
.precio-card,.resumen-card,.enganche{
  background:var(--papel-2);
  border:1px solid var(--linea);border-radius:var(--r);
  padding:clamp(1.4rem,3vw,2.2rem);
}
/* La tarjeta del precio es la que manda: va en tinta para que el número no
   compita con el resto de la página. */
.precio-card{background:#12212f;background:var(--tinta);border-color:transparent;color:var(--claro)}
.card-head{
  margin-bottom:1.1rem;padding-bottom:.9rem;
  border-bottom:1px solid rgba(200,169,106,.28);
}
.card-title{
  margin:0;font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;
  font-weight:400;color:var(--oro-hondo);
}
.precio-card .card-title{color:var(--oro-claro)}
.precio-card .card-head{border-bottom-color:rgba(224,205,159,.3)}

.precio-item{
  margin:0 0 .9rem;font-size:.92rem;line-height:1.55;color:var(--texto-suave);
}
.precio-card .precio-item{color:var(--claro-suave)}
.precio-item.mb0{margin-bottom:0}
.precio-item small{font-size:.62rem;letter-spacing:.18em;opacity:.7}

/* Las cifras. .precio es la grande de la tarjeta de tinta; .precio2 son las del
   plan de pagos, un escalón abajo. */
.precio{
  display:block;margin-top:.35rem;
  font-size:clamp(1.9rem,4.4vw,2.9rem);font-weight:200;line-height:1.1;
  color:var(--oro-claro);
}
.precio2{
  font-weight:300;font-size:1.18rem;color:var(--texto);
}
#nota_aclaratoria{
  display:block;margin-top:.9rem;
  font-size:.74rem;line-height:1.5;color:var(--claro-tenue);
}
#nota_aclaratoria em{font-style:italic}

/* --- Los deslizadores --------------------------------------------------------
   El input[type=range] no se hereda de ningún lado: hay que dibujarlo entero, y
   cada navegador lo pide con su propio prefijo. La barra es un filete claro y el
   tirador un disco de oro; en foco crece el halo, que es lo único que le dice a
   quien navega con teclado dónde está parado.
   -------------------------------------------------------------------------- */
.enganche-header{margin-bottom:1.3rem}
.t-enganche{
  margin:0;font-size:clamp(1.05rem,2vw,1.3rem);font-weight:300;
  letter-spacing:.01em;color:var(--texto);
}
.enganche-subtitle{
  margin:.35rem 0 0;font-size:.86rem;color:var(--texto-suave);
}
.enganche-slider-wrapper{margin-top:.4rem}
.slider-container{display:flex;align-items:center;gap:clamp(.9rem,2vw,1.4rem)}

.slider-enganche{
  -webkit-appearance:none;appearance:none;
  flex:1 1 auto;min-width:0;height:26px;
  background:transparent;cursor:pointer;
}
/* El appearance:none va también en la PISTA y no sólo en el input: sin él,
   Chrome en celular sigue dibujando su barra gris de fábrica y la de 2 px queda
   abajo, escondida. */
.slider-enganche::-webkit-slider-runnable-track{
  -webkit-appearance:none;appearance:none;
  height:2px;border:0;border-radius:2px;background:rgba(140,111,46,.38);
}
.slider-enganche::-moz-range-track{
  height:2px;border:0;border-radius:2px;background:rgba(140,111,46,.38);
}
.slider-enganche::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:22px;height:22px;margin-top:-10px;border-radius:50%;
  background:var(--oro);border:1px solid var(--oro-hondo);
  box-shadow:0 0 0 0 rgba(200,169,106,.35);
  transition:box-shadow .3s var(--ease),transform .2s var(--ease);
}
.slider-enganche::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;
  background:var(--oro);border:1px solid var(--oro-hondo);
  box-shadow:0 0 0 0 rgba(200,169,106,.35);
  transition:box-shadow .3s var(--ease),transform .2s var(--ease);
}
.slider-enganche:hover::-webkit-slider-thumb{transform:scale(1.08)}
.slider-enganche:hover::-moz-range-thumb{transform:scale(1.08)}
.slider-enganche:focus{outline:none}
.slider-enganche:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 7px rgba(200,169,106,.28)}
.slider-enganche:focus-visible::-moz-range-thumb{box-shadow:0 0 0 7px rgba(200,169,106,.28)}

/* --- La escalera del enganche -------------------------------------------------
   La barra dejó de ser una barra de progreso. Ahora tiene tramos marcados, el
   relleno se pone más hondo a medida que sube, y al lado se lee el descuento y
   el ahorro en pesos. El color es la piel; el mecanismo son las marcas y el
   renglón de "te faltan N puntos".

   --p lo escribe el JavaScript: 0 a 1, cuánto va del recorrido.
   -------------------------------------------------------------------------- */
/* Columna flexible para que el renglón del empujón se apoye en el piso de la
   tarjeta: las dos tarjetas —enganche y mensualidad— miden lo mismo porque la
   grilla las estira, pero tienen distinto contenido en el medio. Con el empujón
   pegado abajo, los dos renglones quedan a la misma altura solos, sin números
   mágicos que haya que recalcular cada vez que cambie algo arriba. */
.enganche--escalera{--p:0;display:flex;flex-direction:column}

/* Las dos cifras, arriba de la barra: a la izquierda dónde estás, a la derecha
   qué ganás. La de la derecha aparece recién cuando hay descuento. */
.escalera__cifras{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;margin-bottom:1.1rem;
}
.escalera__pct,.escalera__premio{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.escalera__pct{align-items:flex-start}
.escalera__premio{text-align:right;align-items:flex-end}
/* El número heredaba text-align:right y un min-width del diseño anterior, donde
   vivía en una fila junto al deslizador. Acá encabeza su propia columna, así que
   se alinea con el rótulo de abajo y no flotando a la derecha de su caja. */
.enganche--escalera .valor-enganche-display{min-width:0;text-align:left}
.escalera__k{
  font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--texto-suave);
}
.escalera__k b{color:var(--oro-hondo);font-weight:500;letter-spacing:.06em}
.escalera__desc{
  font-size:clamp(1.3rem,2.8vw,1.7rem);font-weight:300;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--oro-hondo);
}
/* Cuando entra un tramo con premio, el número pega un latido corto. Es la única
   animación de la pieza y está donde importa: en el momento en que la persona
   acaba de ganar algo. */
.enganche--escalera.es-premiado .escalera__desc{animation:escaleraPremio .5s var(--ease)}
@keyframes escaleraPremio{
  0%{transform:scale(1)}
  40%{transform:scale(1.09)}
  100%{transform:scale(1)}
}

/* La barra. El relleno es un degradado fijo de arena a bronce que se revela de
   izquierda a derecha: al crecer, la cabeza del relleno entra sola en el tono
   más hondo. Eso es "cambia de color al poner más" sin semáforos ni rojos, que
   se saldrían de la paleta. */
.enganche--escalera .slider-enganche::-webkit-slider-runnable-track{
  height:8px;border-radius:8px;
  background:
    linear-gradient(90deg,#d9caa4 0%,#c8a96a 46%,#8c6f2e 100%) 0 0 / calc(var(--p) * 100%) 100% no-repeat,
    rgba(45,59,70,.13);
}
.enganche--escalera .slider-enganche::-moz-range-track{
  height:8px;border-radius:8px;
  background:
    linear-gradient(90deg,#d9caa4 0%,#c8a96a 46%,#8c6f2e 100%) 0 0 / calc(var(--p) * 100%) 100% no-repeat,
    rgba(45,59,70,.13);
}
.enganche--escalera .slider-enganche::-webkit-slider-thumb{margin-top:-7px}
.enganche--escalera .slider-enganche{height:34px}

/* Las marcas de los tramos, debajo de la barra. */
/* El margen de abajo lo pone el elemento de arriba y no el empujón, porque el
   empujón usa margin-top:auto para pegarse al piso y un auto no deja aire. */
.escalera__tramos{position:relative;height:2.9rem;margin:.1rem 0 1.2rem}
.escalera__marca{
  position:absolute;top:0;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.22rem;
  text-align:center;line-height:1;
}
.escalera__marca i{
  display:block;width:1px;height:7px;background:rgba(45,59,70,.24);
  transition:background .3s var(--ease),height .3s var(--ease);
}
.escalera__marca b{
  font-size:.6rem;font-weight:400;letter-spacing:.06em;
  color:var(--texto-suave);font-variant-numeric:tabular-nums;
  transition:color .3s var(--ease);
}
/* El premio del tramo, en oro y con el signo menos: es lo que se gana al
   llegar, y tiene que verse desde antes de llegar. */
.escalera__marca em{
  font-style:normal;font-size:.6rem;letter-spacing:.04em;
  color:var(--oro-hondo);opacity:.55;
  transition:opacity .3s var(--ease),color .3s var(--ease);
}
.escalera__marca.es-alcanzado i{background:var(--oro-hondo);height:10px}
.escalera__marca.es-alcanzado b{color:var(--texto)}
.escalera__marca.es-alcanzado em{opacity:1}
.escalera__marca.es-actual b,
.escalera__marca.es-actual em{color:var(--oro-hondo);font-weight:500}

/* El empujón. Va en una caja con filete de oro a la izquierda: se lee como una
   sugerencia del vendedor y no como una advertencia del sistema. */
.escalera__falta{
  margin:auto 0 0;padding:.7rem .9rem;
  border-left:2px solid var(--oro);
  background:rgba(200,169,106,.11);
  font-size:.84rem;line-height:1.55;color:var(--texto-suave);
}
.escalera__falta b{color:var(--texto);font-weight:500}
.escalera__falta[hidden]{display:none}
.escalera__premio[hidden]{display:none}

@media(max-width:560px){
  /* En 320 px de ancho útil, cinco marcas con su porcentaje y su descuento se
     pisan. Se dejan sólo el número y el premio, sin el palito, y más chicos. */
  .escalera__marca b,.escalera__marca em{font-size:.55rem}
  .escalera__cifras{gap:.6rem}
  .escalera__premio{text-align:left;align-items:flex-start}
}

/* --- El reparto del precio ---------------------------------------------------
   La tira de la mensualidad. Es el precio entero en tres tramos: lo que ya se
   puso de enganche, lo que se paga mes a mes y lo que queda para la entrega.
   El tercero es el que importa: al subir la mensualidad se encoge a la vista, y
   eso explica el plan mejor que cualquier renglón de texto.

   Los dos primeros van en oro porque son plata ya comprometida; el tercero en
   gris tinta porque es deuda futura, no logro.
   -------------------------------------------------------------------------- */
.reparto{margin:1.5rem 0 1.2rem}
.reparto[hidden]{display:none}
.reparto__tira{
  display:flex;height:10px;border-radius:8px;overflow:hidden;
  background:rgba(45,59,70,.13);
}
.reparto__t{
  display:block;flex:0 0 auto;min-width:0;height:100%;
  transition:flex-basis .5s var(--ease);
}
.reparto__t--eng{background:#8c6f2e}
.reparto__t--mes{background:#c8a96a}
.reparto__t--sal{background:rgba(45,59,70,.22)}
/* Un pelo de separación entre tramos, para que no se lean como uno solo. */
.reparto__t + .reparto__t{box-shadow:inset 1px 0 0 var(--papel-2,#efe8d8)}

.reparto__pie{
  display:flex;flex-wrap:wrap;gap:.4rem 1.3rem;
  margin:.75rem 0 0;
}
.reparto__l{
  display:inline-flex;align-items:center;gap:.45rem;
  font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--texto-suave);line-height:1.4;
}
.reparto__l i{width:9px;height:9px;border-radius:2px;flex:0 0 auto}
.reparto__l b{font-weight:500;letter-spacing:.06em;color:var(--texto);font-variant-numeric:tabular-nums}

/* El saldo contraentrega no es un premio: es lo que falta. Va en el mismo lugar
   que el descuento del enganche pero en el color del texto, no en oro, para no
   celebrar un número que conviene que baje. */
.enganche--reparto .escalera__desc{color:var(--texto)}

@media(max-width:560px){
  .reparto__pie{gap:.35rem .9rem}
  .reparto__l{font-size:.57rem;letter-spacing:.1em}
}

/* El valor no baila mientras se arrastra: ancho mínimo y tabulares, si no el
   deslizador se corre solo al pasar de 9% a 10%. */
.valor-enganche-display{
  flex:0 0 auto;min-width:5.2ch;text-align:right;
  font-size:clamp(1.15rem,2.4vw,1.5rem);font-weight:300;
  font-variant-numeric:tabular-nums;
  color:var(--oro-hondo);
}

/* --- El apartado ------------------------------------------------------------ */
.btn-apartar2{
  display:block;width:100%;
  padding:1.05rem 1.8rem;
  border:0;border-radius:999px;
  background:#c8a96a;background:var(--oro);color:#14120f;
  font-family:inherit;font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;
  cursor:pointer;
  transition:background .3s var(--ease),transform .3s var(--ease);
}
.btn-apartar2:hover{background:var(--oro-claro);transform:translateY(-2px)}
.btn-apartar2:focus-visible{outline:2px solid var(--oro-hondo);outline-offset:3px}
.btn-apartar2[disabled]{opacity:.45;pointer-events:none}

.cotizador-info{
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(1rem,3vw,2rem);flex-wrap:wrap;
  margin-top:clamp(1.4rem,3vw,2rem);padding-top:clamp(1.4rem,3vw,2rem);
  border-top:1px solid var(--linea);
}
.info-left{display:flex;align-items:center;gap:.9rem;min-width:0}
.info-ico{
  flex:0 0 auto;display:grid;place-items:center;
  width:42px;height:42px;border-radius:50%;
  background:rgba(200,169,106,.16);color:var(--oro-hondo);
}
.info-text{display:flex;flex-direction:column;gap:.2rem;min-width:0}
.info-label{font-size:.94rem;color:var(--texto)}
.info-detail{font-size:.8rem;line-height:1.45;color:var(--texto-suave)}
.info-price{text-align:right;flex:0 0 auto}
.info-price-caption{
  display:block;font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--texto-suave);
}
.info-price-amount{
  display:block;margin-top:.25rem;
  font-size:clamp(1.3rem,2.8vw,1.7rem);font-weight:300;color:var(--texto);
}
.info-price-cur{font-size:.6rem;letter-spacing:.18em;color:var(--texto-suave)}
.opciones{
  margin:clamp(1.2rem,2.6vw,1.6rem) 0 0;
  font-size:.82rem;line-height:1.6;color:var(--texto-suave);
}

/* --- Los socios ------------------------------------------------------------ */
.logos-section{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(2rem,6vw,5rem);flex-wrap:wrap;
  padding:clamp(2.4rem,5vw,3.6rem) clamp(1.2rem,5vw,3rem);
  background:var(--papel-2);
  border-top:1px solid var(--linea);
}
/* Los logos de los socios vienen cada uno con su peso y su color. Bajarlos a
   una sola tinta y a una sola opacidad los pone a la misma altura visual, que
   es lo que una fila de socios tiene que decir. */
.partner-logo{
  height:clamp(26px,3.4vw,38px);width:auto;
  opacity:.62;filter:grayscale(1);
  transition:opacity .35s var(--ease),filter .35s var(--ease);
}
.partner-logo:hover{opacity:1;filter:none}

/* --- La banda de modo prueba -------------------------------------------------
   Naranja y fea a propósito: tiene que ser imposible confundir esta página con
   la de producción. Se pinta sólo cuando $MODO_PRUEBA es true, y se lleva la
   barra del sitio hacia abajo para no taparla.
   -------------------------------------------------------------------------- */
.modo-prueba{
  position:fixed;top:0;left:0;right:0;z-index:200;
  display:flex;align-items:center;justify-content:center;
  gap:.7rem;flex-wrap:wrap;
  padding:.5rem 1rem;
  background:#b45309;color:#fff;
  font-size:.72rem;line-height:1.35;text-align:center;
}
.modo-prueba b{
  font-weight:500;letter-spacing:.18em;text-transform:uppercase;font-size:.64rem;
}
.modo-prueba span{opacity:.92}
/* La barra del sitio es fixed y arranca en 26px: con la banda puesta hay que
   correr las dos, la tira de idiomas y el menú. */
body:has(.modo-prueba) .tira{top:34px}
body:has(.modo-prueba) .nav{top:60px}
@media(max-width:700px){
  body:has(.modo-prueba) .tira{top:46px}
  body:has(.modo-prueba) .nav{top:72px}
}

/* --- El aviso ----------------------------------------------------------------
   openInfoModal() se llamaba desde el cotizador pero se definía en cada página
   por separado, y en ésta no estaba: el aviso de "Lista de Espera" tiraba un
   error en la consola y no se veía nada. Ahora la función vive en la página y
   este es su vestido, con la tipografía y el oro del sitio.
   -------------------------------------------------------------------------- */
.aviso{
  position:fixed;inset:0;z-index:1200;
  display:grid;place-items:center;padding:clamp(1rem,5vw,2rem);
  background:rgba(6,14,22,.62);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  opacity:0;pointer-events:none;
  transition:opacity .35s var(--ease);
}
.aviso.is-on{opacity:1;pointer-events:auto}
.aviso__caja{
  width:min(440px,100%);
  padding:clamp(1.8rem,4vw,2.6rem);
  background:var(--papel);border-radius:var(--r);
  text-align:center;
  transform:translateY(14px) scale(.97);
  transition:transform .4s var(--ease);
}
.aviso.is-on .aviso__caja{transform:none}
.aviso__ico{
  display:grid;place-items:center;margin:0 auto 1.1rem;
  width:52px;height:52px;border-radius:50%;
  font-size:1.4rem;line-height:1;
}
.aviso__ico.es-success{background:rgba(28,58,51,.12);color:var(--verde)}
.aviso__ico.es-warning{background:rgba(200,169,106,.2);color:var(--oro-hondo)}
.aviso__ico.es-error{background:rgba(150,60,50,.14);color:#8f3b31}
.aviso__t{
  margin:0 0 .7rem;font-size:clamp(1.2rem,2.4vw,1.5rem);font-weight:300;
  color:var(--texto);
}
.aviso__p{margin:0;font-size:.94rem;line-height:1.6;color:var(--texto-suave)}
.aviso__btns{display:flex;flex-direction:column;gap:.7rem;margin-top:1.6rem}
.btn-modal{
  padding:.9rem 1.6rem;border:0;border-radius:999px;
  background:var(--oro);color:#14120f;
  font-family:inherit;font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;
  cursor:pointer;transition:background .3s var(--ease);
}
.btn-modal:hover{background:var(--oro-claro)}
.btn-modal.cancelar{
  background:transparent;color:var(--texto-suave);
  border:1px solid var(--linea);
}
.btn-modal.cancelar:hover{background:var(--papel-2);color:var(--texto)}
.btn-modal:focus-visible{outline:2px solid var(--oro-hondo);outline-offset:3px}

/* ==========================================================================
   El acceso (indexDialog.php)
   Una foto a sangre y una tarjeta encima. Antes era un <dialog> blanco con el
   formulario adentro de una <table>.
   ========================================================================== */
.acceso{
  position:relative;min-height:100svh;min-height:100dvh;
  display:grid;place-items:center;
  padding:clamp(5.5rem,12vh,8rem) clamp(1.2rem,5vw,2rem) clamp(2rem,6vh,4rem);
  background:#12212f;background:var(--tinta);
  overflow:hidden;
}
.acceso__fondo{position:absolute;inset:0;z-index:0}
.acceso__fondo img{width:100%;height:100%;object-fit:cover;display:block}
.acceso__fondo::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(9,18,28,.76) 0%,rgba(9,18,28,.58) 40%,rgba(9,18,28,.8) 100%);
}
/* La tarjeta va en tinta y no en papel. El logo del sitio es crema sobre
   transparente —el mismo archivo que usa la barra— y sobre una tarjeta clara
   desaparecía. En tinta entra tal cual, y de paso la pantalla de acceso se
   parece a las secciones oscuras del sitio en vez de a un formulario suelto. */
.acceso__caja{
  position:relative;z-index:1;
  width:min(420px,100%);
  padding:clamp(2rem,5vw,2.8rem);
  background:rgba(9,18,28,.9);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(224,205,159,.16);
  border-radius:var(--r);
  color:var(--claro);
}
.acceso__marca{display:block;width:min(210px,64%);height:auto;margin:0 auto clamp(1.6rem,4vw,2.2rem)}
.acceso__t{
  margin:0 0 .4rem;text-align:center;
  font-size:clamp(1.3rem,3vw,1.6rem);font-weight:300;color:var(--claro);
}
.acceso__p{
  margin:0 0 clamp(1.6rem,4vw,2.1rem);text-align:center;
  font-size:.9rem;line-height:1.55;color:var(--claro-suave);
}
.campo{display:block;margin-bottom:1.1rem}
.campo__k{
  display:block;margin-bottom:.45rem;
  font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--oro-claro);
}
.campo__v{
  display:block;width:100%;
  padding:.85rem 1rem;
  font-family:inherit;font-size:1rem;color:var(--claro);
  background:rgba(246,241,229,.07);
  border:1px solid rgba(246,241,229,.24);border-radius:var(--r);
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease);
}
.campo__v::placeholder{color:rgba(246,241,229,.4)}
.campo__v:focus{
  outline:none;border-color:var(--oro-claro);
  background:rgba(246,241,229,.11);
  box-shadow:0 0 0 3px rgba(200,169,106,.22);
}
/* Chrome pinta el autocompletado de amarillo con letra negra y sobre la tinta
   queda ilegible. El truco de la sombra interior es el único que lo pisa. */
.campo__v:-webkit-autofill,
.campo__v:-webkit-autofill:hover,
.campo__v:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--claro);
  -webkit-box-shadow:0 0 0 1000px #16283a inset;
  caret-color:var(--claro);
}
/* El ojo del password. Va dentro del campo y es un botón de verdad, no un
   <img> con onclick: así se llega con el tabulador y se dispara con Enter. */
.campo--clave{position:relative}
.campo--clave .campo__v{padding-right:3rem}
.campo__ojo{
  position:absolute;right:.35rem;bottom:.3rem;
  width:2.5rem;height:2.5rem;
  display:grid;place-items:center;
  background:none;border:0;cursor:pointer;color:var(--claro-tenue);
  border-radius:var(--r);
}
.campo__ojo:hover{color:var(--claro)}
.campo__ojo:focus-visible{outline:2px solid var(--oro-hondo);outline-offset:-2px}
.acceso__enviar{
  display:block;width:100%;margin-top:1.5rem;
  padding:1rem 1.6rem;border:0;border-radius:999px;
  background:var(--oro);color:#14120f;
  font-family:inherit;font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;
  cursor:pointer;transition:background .3s var(--ease),transform .3s var(--ease);
}
.acceso__enviar:hover{background:var(--oro-claro);transform:translateY(-2px)}
.acceso__enviar:focus-visible{outline:2px solid var(--oro-hondo);outline-offset:3px}
.acceso__enviar[disabled]{opacity:.5;pointer-events:none;transform:none}
/* El error va en la página y no en una ventana aparte: quien se equivocó la
   contraseña tiene que ver el mensaje al lado del campo, no tener que cerrar un
   cartel para volver a intentar. */
.acceso__error{
  margin:1.1rem 0 0;padding:.75rem .9rem;
  border-left:2px solid #e08a7e;
  background:rgba(224,138,126,.12);
  font-size:.86rem;line-height:1.5;color:#f0c4bd;
}
.acceso__error[hidden]{display:none}
.acceso__volver{
  display:block;margin-top:1.6rem;text-align:center;
  font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--claro-tenue);text-decoration:none;
}
.acceso__volver:hover{color:var(--claro)}
.acceso__volver:focus-visible{outline:2px solid var(--oro-claro);outline-offset:3px}

/* --- Celular -----------------------------------------------------------------
   Las dos grillas de dos columnas pasan a una sola. El corte va en 820 px y no
   en 700: a 760 las tarjetas quedaban de 340 px y el precio, que es la cifra
   más larga de la página, se partía en dos renglones.
   -------------------------------------------------------------------------- */
@media(max-width:820px){
  .flex-cotizador2,
  .tabs-buttons{grid-template-columns:1fr}
  .cotizador-info{flex-direction:column;align-items:flex-start;gap:1.2rem}
  .info-price{text-align:left}
}
@media(max-width:560px){
  .tab-button{padding:1rem}
  .tab-desc{display:none}
  .aviso__btns{gap:.6rem}
}

/* Con el movimiento apagado no hay nada que crecer ni que deslizar. */
@media(prefers-reduced-motion:reduce){
  .btn-apartar2:hover,.acceso__enviar:hover{transform:none}
  .aviso,.aviso__caja{transition:none}
  .aviso__caja{transform:none}
}