/* Deco Rock — el escogedor de piedra del formulario de cotización.
   Lo cargan solo coti.html y en/request-a-quote.html.

   Usa los tokens del tema «lujo» y no define ni un color propio, para que el
   formulario siga siendo el mismo formulario y no una isla con estilo aparte.

   Regla que se cuida en todo el archivo: nada mide más que su caja. Las tiras
   de color ruedan dentro de su propio contenedor (overflow-x), los select
   llevan box-sizing y max-width, y toda rejilla usa minmax(min(N,100%),1fr).
   En un teléfono angosto eso es la diferencia entre leerse y salirse. */

/* ---------- los dos select ---------- */
.dr-cotipick{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.dr-cotipick-sel{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr));gap:12px}
.dr-cotipick-f{min-width:0}

.dr-cotipick select{
  width:100%;max-width:100%;box-sizing:border-box;
  background-color:rgba(240,231,218,.03);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23c08a4a' stroke-width='1.6'/></svg>");
  background-repeat:no-repeat;background-position:right 14px center;
  border:1px solid rgba(240,231,218,.24);color:var(--dr-cream);
  font-family:var(--dr-sans);font-size:16.5px;
  padding:14px 40px 14px 16px;min-height:52px;border-radius:0;
  -webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}
.dr-cotipick select:focus{outline:0;border-color:var(--dr-brass);
  background-color:rgba(240,231,218,.06)}
/* el desplegable lo pinta el sistema: sin esto sale texto crema sobre blanco */
.dr-cotipick select option,
.dr-cotipick select optgroup{background:var(--dr-panel);color:var(--dr-cream)}

/* ---------- la tira de colores ----------
   Una sola línea que rueda de lado. En el teléfono es lo primero que ve el
   cliente: fotos, no nombres sueltos. */
.dr-cotipick-strip{display:flex;gap:10px;min-width:0;
  overflow-x:auto;overflow-y:hidden;padding-bottom:8px;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:var(--dr-brass-line) transparent}
.dr-cotipick-strip::-webkit-scrollbar{height:5px}
.dr-cotipick-strip::-webkit-scrollbar-track{background:rgba(240,231,218,.06)}
.dr-cotipick-strip::-webkit-scrollbar-thumb{background:var(--dr-brass-line)}
/* La tira se abre en varias filas SOLO en pantalla alta; el criterio esta al
   final del archivo, con el resto del apreton vertical de computadora. Aqui
   arriba no se decide nada, para que no queden dos reglas peleandose.
   (Piedra Laja trae 22 colores: envuelta y sin tope son 675px de fotos.) */

/* Dos clases en cada selector a proposito: `.dr-form button` ya fija fondo y
   color para todo boton dentro del formulario, y con una sola clase le gana en
   especificidad — el color escogido y los demas se veian igual. */
.dr-cotipick-strip .dr-cotipick-sw{flex:0 0 auto;width:84px;padding:0;
  border:1px solid rgba(240,231,218,.18);background:var(--dr-deep);
  color:var(--dr-muted);cursor:pointer;scroll-snap-align:start;
  transition:border-color .2s ease,color .2s ease,background .2s ease}
.dr-cotipick-strip .dr-cotipick-sw img{display:block;width:100%;
  aspect-ratio:1/1;object-fit:cover}
.dr-cotipick-strip .dr-cotipick-sw span{display:block;padding:5px 4px 6px;
  font-family:var(--dr-sans);font-size:11px;letter-spacing:.08em;
  line-height:1.3;text-transform:uppercase;text-align:center}
.dr-cotipick-strip .dr-cotipick-sw:hover{border-color:var(--dr-brass);
  color:var(--dr-cream)}
.dr-cotipick-strip .dr-cotipick-sw[aria-pressed="true"]{
  border-color:var(--dr-brass);color:var(--dr-cream);
  background:rgba(192,138,74,.12);box-shadow:inset 0 0 0 1px var(--dr-brass)}

.dr-cotipick-note{font-size:14px;line-height:1.7;color:var(--dr-muted);margin:0}

/* ---------- «Otro producto» ----------
   El campo de texto de siempre. Sin JavaScript queda a la vista, que es como
   funcionaba esta página antes de existir el escogedor. */
.dr-coti-other{min-width:0}
[data-coti-pick] [hidden]{display:none}

/* ---------- la foto ---------- */
.dr-coti-photo{margin:0;min-width:0}
.dr-coti-photo img{display:block;width:100%;height:auto;
  border:1px solid var(--dr-line)}
.dr-coti-photo figcaption{display:flex;flex-wrap:wrap;align-items:baseline;
  gap:6px 14px;padding:14px 16px;
  border:1px solid var(--dr-line);border-top:0;background:var(--dr-panel)}
.dr-coti-photo figcaption span{width:100%;font-size:11.5px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--dr-brass)}
.dr-coti-photo figcaption strong{font-family:var(--dr-serif);font-weight:300;
  font-size:clamp(20px,2.4vw,26px);line-height:1.1;color:var(--dr-cream)}
.dr-coti-photo figcaption a{margin-left:auto;min-width:0;font-size:12.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--dr-brass);
  border-bottom:1px solid var(--dr-brass-line)}

/* ---------- el apreton vertical del telefono ----------
   El duenno lo pidio asi: "que se vea el primer campo abierto del nombre en la
   mayoria de resoluciones, para que la gente no se pierda en el formulario".

   Medido en 390x844 antes de tocar nada: el campo Nombre nacia en y=995, o sea
   151px por debajo del pliegue. Nadie sabia que habia un formulario.

   Todo aqui va colgado de `body:has([data-coti-pick])`, o sea SOLO las paginas
   de cotizacion. El resto del sitio no se entera, y la gemela en ingles la
   hereda sin tocarle el HTML porque es la misma hoja.

   Tres escalones, y el segundo y el tercero van por ALTO de pantalla, que es
   donde de verdad duele:
     <=560 de ancho ................ el apreton normal
     y ademas <=800 de alto ........ telefono corto (Android de 740)
     y ademas <=700 de alto ........ iPhone SE, el mas apretado que importa

   Resultado medido, la etiqueta "Nombre completo *" a la vista en los tres:
     390x844  etiqueta y=751, el campo asoma 67px
     360x740  etiqueta y=703, el campo asoma 11px
     375x667  etiqueta y=638, el campo asoma  4px                        */
@media(max-width:560px){
  .dr-cotipick-strip .dr-cotipick-sw{width:66px}
  .dr-coti-photo figcaption a{margin-left:0}

  /* la miga de pan trae padding-top:clamp(110px,15vh,150px) para librar el
     encabezado fijo, que en telefono mide 90. 126px eran 36 de aire puro. */
  body:has([data-coti-pick]) .dr-crumb{padding-top:104px}
  body:has([data-coti-pick]) h1{font-size:27px;margin-bottom:8px}
  /* el parrafo de entrada a dos lineas: la nota bajo el escogedor ya repite
     la instruccion, asi que no se pierde nada que haga falta */
  body:has([data-coti-pick]) .dr-lede{font-size:15.5px;line-height:1.6;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

  /* linea y color, lado a lado: se gana una fila entera (89px) y a 360 cada
     select todavia mide 156px, que alcanza de sobra */
  .dr-cotipick{gap:10px}
  .dr-cotipick-sel{grid-template-columns:1fr 1fr;gap:8px}
  .dr-cotipick select{padding-top:11px;padding-bottom:11px}
  .dr-cotipick-strip{padding-bottom:4px}
  .dr-cotipick-note{font-size:13px;line-height:1.45}
}

@media(max-width:560px) and (max-height:800px){
  body:has([data-coti-pick]) .dr-crumb{padding-top:98px}
  body:has([data-coti-pick]) .dr-lede{-webkit-line-clamp:1}
  body:has([data-coti-pick]) h1{font-size:25px;margin-bottom:6px}
  .dr-cotipick{gap:8px}
  .dr-cotipick select{padding-top:10px;padding-bottom:10px}
  .dr-cotipick-strip{padding-bottom:2px}
  .dr-cotipick-strip .dr-cotipick-sw{width:60px}
  .dr-cotipick-note{font-size:12.5px;line-height:1.4;margin-top:2px}
}

@media(max-width:560px) and (max-height:700px){
  /* en el SE el parrafo de entrada se va del todo; la nota bajo el escogedor
     sigue diciendo que hacer */
  body:has([data-coti-pick]) .dr-lede{display:none}
  .dr-cotipick-strip .dr-cotipick-sw{width:56px}
  .dr-cotipick-strip .dr-cotipick-sw img{height:44px;object-fit:cover}
  .dr-cotipick-note{font-size:12px}
}

/* ---------- el aviso de «hay más abajo» ----------
   Lo crea js/dr-coti.js a los cuatro segundos, y solo si la persona no ha
   tocado nada y de verdad queda formulario fuera de la vista. Se va sola al
   primer movimiento. Fija abajo y centrada, encima del contenido pero por
   debajo del encabezado (z-index 60) y del visor de fotos (200).            */
.dr-coti-more{
  position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));
  transform:translate(-50%,14px);
  z-index:55;display:flex;align-items:center;gap:9px;
  padding:14px 20px;min-height:46px;box-sizing:border-box;cursor:pointer;
  border:1px solid var(--dr-brass);background:rgba(23,19,16,.94);
  color:#e7c08a;font-family:var(--dr-sans);font-size:12.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;
  opacity:0;pointer-events:none;
  transition:opacity .35s ease,transform .35s ease;
}
.dr-coti-more.is-on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.dr-coti-more::after{
  content:"";width:7px;height:7px;margin-top:-3px;
  border-right:1.5px solid var(--dr-brass);border-bottom:1.5px solid var(--dr-brass);
  transform:rotate(45deg);animation:dr-coti-nudge 1.6s ease-in-out infinite;
}
@keyframes dr-coti-nudge{
  0%,100%{transform:rotate(45deg) translate(0,0)}
  50%{transform:rotate(45deg) translate(2px,2px)}
}
@media (prefers-reduced-motion:reduce){
  .dr-coti-more,.dr-coti-more::after{transition:none;animation:none}
}

/* ---------- el mismo apreton, pero en la computadora ----------
   El duenno, con una raya roja pintada sobre la portada de la pagina: "el
   texto y el disenno se comen mucho espacio; empujelo para arriba, que se vean
   los primeros campos, el nombre, para que la gente entienda que esto es un
   formulario que hay que llenar y mandar".

   Medido en 1366x768 antes de tocar nada: el formulario nacia en y=406 y la
   etiqueta "Nombre completo" en y=950 -- 182px por debajo del pliegue. Los 406
   se repartian asi:

     115  padding de la miga de pan, para librar un encabezado de 85
      40  margen de arriba de .dr-duo
      27  el sobretitulo y su margen
      51  el h1 (32px de letra con interlinea 1,6)
      32  los margenes de la rayita
      80  el parrafo de entrada y su margen
      36  el margen de arriba del formulario

   Ninguno de esos numeros es escandaloso por si solo; el problema es la suma.
   Aqui se recorta cada uno a lo que de verdad necesita y no mas. Nada cambia
   de tamanno de letra salvo el parrafo de entrada: es aire lo que se quita.

   Todo cuelga de `body:has([data-coti-pick])`, o sea SOLO las paginas de
   cotizacion -- el resto del sitio sigue igual hasta que el duenno lo pida.
   El !important es por el `style="margin-top:36px"` que va escrito en el HTML
   de coti.html; asi no hay que tocar ese archivo.                          */
@media(min-width:561px){
  /* el encabezado fijo mide 85 en computadora y 71 entre 761 y 1100; con 96
     abajo y 116 arriba sigue respirando y se devuelven ~20px */
  body:has([data-coti-pick]) .dr-crumb{padding-top:clamp(96px,10vh,116px)}
  body:has([data-coti-pick]) .dr-duo{margin-top:18px}
  body:has([data-coti-pick]) .dr-eyebrow{margin-bottom:7px}
  /* un titulo de una sola palabra no necesita interlinea de 1,6 */
  body:has([data-coti-pick]) h1{line-height:1.15}
  body:has([data-coti-pick]) .dr-rule{margin-top:12px;margin-bottom:12px}
  body:has([data-coti-pick]) .dr-lede{font-size:17px;line-height:1.55;
    margin-bottom:6px}
  body:has([data-coti-pick]) form[data-coti]{margin-top:18px!important}

  /* Solo la pagina inglesa: alla el formulario va dentro de una
     `.dr-wrap.dr-section` con 63px de padding arriba, porque se arma con el
     mismo molde que las paginas de contenido. La espanola no tiene esa capa.
     Sin esto el ingles arrancaba 72px mas abajo que su gemelo. */
  body:has([data-coti-pick]) .dr-section:has(> .dr-duo){padding-top:18px}

  .dr-cotipick{gap:10px}
  .dr-cotipick-note{font-size:13.5px;line-height:1.5}
}

/* La tira de colores en computadora: una sola fila que rueda de lado, igual
   que en el telefono. Envuelta en dos filas se comia 249px de la columna del
   formulario y era, sola, la mitad del problema.

   La excepcion es la pantalla ALTA: de 900px de alto para arriba sobra sitio,
   y ahi si se abren todas las fotos de un golpe, que es como el duenno queria
   verlas. Es el mismo criterio que usan los tres escalones del telefono, pero
   al reves. */
@media(min-width:761px){
  .dr-cotipick-strip{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
    max-height:none;padding-bottom:8px}
}
@media(min-width:761px) and (min-height:900px){
  .dr-cotipick-strip{flex-wrap:wrap;overflow-x:visible;padding-bottom:0;
    max-height:300px;overflow-y:auto}
}

/* Portatiles bajitos. El 1366x768 es la maquina mas comun de Costa Rica y con
   el navegador abierto entero deja unos 620px de ventana util, no 768. Dos
   escalones mas, por ALTO, con el mismo criterio que uso la version de
   telefono: primero se va el aire, despues el adorno.                      */
@media(min-width:561px) and (max-height:800px){
  body:has([data-coti-pick]) .dr-crumb{padding-top:92px}
  body:has([data-coti-pick]) .dr-rule{margin-top:8px;margin-bottom:8px}
  /* el parrafo de entrada a una linea: la nota bajo el escogedor repite la
     instruccion, asi que no se pierde nada que haga falta */
  body:has([data-coti-pick]) .dr-lede{font-size:16.5px;line-height:1.5;
    display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;
    overflow:hidden}
  /* La pagina inglesa trae DOS parrafos de entrada y el segundo es el del
     WhatsApp: recortado a una linea le podia quedar el numero por fuera. Se
     esconde entero, que el pie del formulario lo repite igual. */
  body:has([data-coti-pick]) .dr-lede ~ .dr-lede{display:none}
  .dr-cotipick-strip .dr-cotipick-sw{width:72px}
  .dr-cotipick-note{font-size:13px;line-height:1.45}
}

@media(min-width:561px) and (max-height:700px){
  /* Aqui ya no alcanza con quitar aire. El nombre del color sale de la muestra
     -- sigue estando en el desplegable de al lado y bajo la foto grande, que
     es donde de verdad se lee -- y la muestra queda como lo que es a esta
     altura: una pastilla de color para escoger de un vistazo. */
  body:has([data-coti-pick]) .dr-lede{display:none}
  .dr-cotipick-strip .dr-cotipick-sw{width:58px}
  .dr-cotipick-strip .dr-cotipick-sw span{display:none}
}