@charset "UTF-8";

  :root{
    --mat:#16302A;
    --mat-2:#1D3E35;
    --mat-line:#2C5346;
    --paper:#F2E9D3;
    --paper-2:#E8D9B6;
    --paper-edge:#C7B78C;
    --ink:#241F16;
    --ink-soft:#57503F;
    --chalk:#EFE6D3;
    --thread:#E23F82;
    --thread-dark:#B72A66;
    --pin:#D9A441;
    --mist:#A9C4B9;
    --font-display:'Fraunces', 'Didot', Georgia, serif;
    --font-body:'Inter', 'Segoe UI', sans-serif;
    /* Ya no es monoespaciada: es la voz de las etiquetas técnicas, en versalitas
       y con mucho espaciado. Inter cubre ese papel con tabular-nums. */
    --font-detalle:'Inter', 'Segoe UI', sans-serif;
  }

  *{ box-sizing:border-box; }

  html,body{
    margin:0;
    padding:0;
    background:var(--mat);
    color:var(--chalk);
    font-family:var(--font-body);
    min-height:100%;
  }

  /* Columna a pantalla completa: la portada ocupa la ventana entera aunque el
     contenido no llegue, asi que las dos capas de fondo nunca se quedan a media
     altura con banda muerta debajo. */
  body{
    position:relative;
    overflow-x:hidden;
    display:flex;
    flex-direction:column;
    min-height:100vh;
  }

  .mat-illustrations{
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    z-index:0;
    pointer-events:none;
    background-color:var(--mat);
    background-image:
      repeating-linear-gradient(0deg, var(--mat-line) 0 1px, transparent 1px 64px),
      repeating-linear-gradient(90deg, var(--mat-line) 0 1px, transparent 1px 64px),
      repeating-linear-gradient(45deg, rgba(239,230,211,0.035) 0 1px, transparent 1px 22px),
      radial-gradient(ellipse at 50% -10%, rgba(233,213,157,0.10), transparent 55%);
    background-attachment:fixed;	
    /* La tinta de las piezas del tapiz. Va aqui y no en cada trazado
       porque estos declaran stroke="currentColor", que es lo unico que
       atraviesa el clon de <use>: las reglas CSS no llegan a el. */
    color:var(--chalk);
  }

  /* El desfile va en la misma capa que el tapiz (z-index 0) pero despues en el
     documento, asi que se pinta encima sin necesidad de inventarse un nivel
     intermedio entre el fondo y el contenido. Anclado abajo, queda bajo los
     botones. La mascara disuelve el borde superior: el tapiz no se corta con una
     linea recta, se desvanece dentro de la escena. */
  .pasarela{
    position:fixed;
    left:0;
    width:100%;
    /* La escena se hunde por debajo del borde inferior para que su parte alta
       —las cabezas del publico y la de la modelo— quede lejos de los botones.
       Lo que se pierde por abajo es suelo de pasarela, que no dice nada.
       El desplazamiento va en vw, la misma unidad que manda en el tamano del
       dibujo, asi que la escena baja lo mismo en proporcion en cualquier
       ventana. Y la altura es la natural, sin recorte: recortando por arriba
       para acortar la banda, en ventanas anchas y bajas la modelo se quedaba
       sin cabeza. */
    bottom:-9vw;
    height:auto;
    z-index:0;
    pointer-events:none;
    opacity:0.42;
    -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 42%);
    mask-image:linear-gradient(to bottom, transparent 0, #000 42%);
  }

  main{
    position:relative;
    z-index:1;
    flex:1 0 auto;
    /* Sin esto, el min-width:auto de este hijo flexible vale el ancho minimo de
       su contenido, y la rejilla de botones -seis columnas de 168px- lo estiraba
       a 1144px dentro de una ventana de 390: body lo recorta con su
       overflow-x:hidden y los botones se salian de la pantalla sin dar la cara.
       Con 0, main nunca es mas ancho que la ventana y la rejilla cuenta sus
       columnas contra el ancho que hay de verdad.
       Y width:100% porque con margin:0 auto main no se estira: se dimensiona
       por su contenido, y sin un ancho definido volveria a medir lo que mida la
       rejilla. Los dos hacen falta; ninguno solo. */
    min-width:0;
    width:100%;
    max-width:76rem;
    margin:0 auto;
    /* El margen de arriba se encoge con la ventana: en pantallas cortas la
       escena del desfile cabalga mas alto y la cabeza de la modelo se acerca a
       los botones, asi que ahi es donde hace falta recortar. En ventanas altas
       no hubo nunca choque y se deja respirar. */
    padding:clamp(3.25rem, 5vh, 4.5rem) 1.5rem 6rem;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
  }

  /* El aviso, en la esquina de abajo a la derecha. Ya no sigue la columna de
     main: se pega al filo de la ventana con el mismo relleno de 1,5rem que usa
     el resto de la pagina, que es lo mas a la derecha que puede ir sin quedar
     descolgado del margen comun. */
  .aviso{
    position:relative;
    z-index:1;
    width:100%;
    padding:0 1.5rem 1.5rem;
    display:flex;
    justify-content:flex-end;
  }
  .aviso p{
    margin:0;
    max-width:31rem;
    text-align:right;
    text-wrap:pretty;
    font-size:0.76rem;
    line-height:1.55;
    color:#fff;
    /* Blanco muy diluido: la caja tiene que leerse como caja sobre el tapiz
       pero sin llegar a ser clara, porque el texto tambien es blanco. Al 14 %
       sobre el verde queda un panel apenas insinuado y el contraste del texto
       no baja de 7:1 contra el. El radio es el de los botones. */
    background:rgba(255,255,255,0.14);
    /* El filo no es adorno: donde por detras pasa una figura del publico, que es
       mas clara que el tapiz, el relleno al 14 % se funde con ella y la caja
       deja de leerse como caja. La linea la sostiene siempre. */
    border:1px solid rgba(255,255,255,0.3);
    border-radius:10px;
    padding:0.7rem 0.95rem;
    /* La sombra sigue haciendo falta: por debajo del panel pasan las figuras
       del desfile, bastante mas claras que el tapiz, y es lo que evita que el
       blanco se pierda justo encima de ellas. */
    text-shadow:0 1px 3px rgba(0,0,0,0.7);
  }
  @media (max-width: 30rem){
    /* En el movil la linea es demasiado corta para alinear a la derecha sin que
       quede desflecada: se centra y se deja a todo el ancho. */
    .aviso{ justify-content:center; }
    .aviso p{ text-align:center; }
  }

  .eyebrow{
    font-family:var(--font-detalle);
    font-size:0.95rem;
    font-weight:600;
    letter-spacing:0.32em;
    text-transform:uppercase;
    color:var(--pin);
    margin:0 0 1.4rem;
  }

  h1{
    font-family:var(--font-display);
    font-weight:700;
    font-size:clamp(2.6rem, 6vw, 4.6rem);
    line-height:1.05;
    letter-spacing:-0.01em;
    margin:0 0 1.3rem;
    color:var(--paper);
    text-wrap:balance;
  }

  h1 em{
    font-style:italic;
    font-weight:500;
    color:var(--thread);
  }

  .lede{
    font-size:1.08rem;
    line-height:1.6;
    color:var(--mist);
    max-width:38rem;
    margin:0 0 2.4rem;
    text-wrap:balance;
  }

  /* Rejilla y no fila flexible: con columnas de ancho fijo, todas las filas
     usan las mismas, asi que al partirse los botones quedan alineados en
     vertical y en horizontal con el mismo hueco en los dos ejes. Centrada, una
     fila flexible centra cada renglon por su cuenta y las columnas no se
     corresponden: a 900px la primera empezaba en x=88 y la segunda en x=262.

     El numero de columnas no se deja a auto-fit, sino que se fija por tramos, y
     solo con divisores de seis: 1, 2, 3 y 6. Los botones son seis, asi que
     cualquier otro numero deja la ultima fila a medias -con auto-fit salian 4+2
     a 900px- y entonces el conjunto se ve escorado a la izquierda por mucho que
     la rejilla este centrada. Con un divisor no hay filas incompletas: el bloque
     es siempre un rectangulo lleno, y centrarlo lo centra de verdad. */
  .options{
    display:grid;
    grid-template-columns:10.5rem;
    justify-content:center;
    gap:1.1rem;
    width:100%;
    /* main es una columna flexible, y sin esto el min-width:auto de este hijo
       vale el ancho minimo de su contenido y la rejilla se desborda en vez de
       encogerse. */
    min-width:0;
    /* 73rem y no 64: es todo el ancho de contenido que deja main (76rem menos
       sus 1,5rem de relleno a cada lado), y hace falta entero para que los seis
       botones entren en una sola linea. */
    max-width:73rem;
    margin:0 0 3rem;
  }

  .tag-btn{
    position:relative;
    display:flex;
    align-items:center;
    gap:0.85rem;
    background:var(--paper);
    color:var(--ink);
    border:none;
    border-radius:10px;
    padding:1rem 1.4rem 1rem 1.1rem;
    /* 10,5rem: el boton mas ancho por contenido es Pantalon, que pide 10,17rem,
       asi que a esta medida ninguno aprieta y los seis van iguales. */
    min-width:10.5rem;
    /* El alto salia por accidente: 2,5rem del disco del icono mas 1rem de
       relleno arriba y otro abajo. Escrito aqui, el boton de las fichas -que no
       lleva disco- mide lo mismo este donde este, y no depende de que un vecino
       mas alto lo estire: solo en su fila se quedaba en 68px frente a 72. */
    min-height:4.5rem;
    cursor:pointer;
    font-family:var(--font-body);
    text-align:left;
    box-shadow:0 1px 0 rgba(0,0,0,0.15), 0 10px 22px -12px rgba(0,0,0,0.55);
    transition:transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
  }
  .tag-btn::before{
    content:"";
    position:absolute;
    inset:5px;
    border:1px dashed var(--paper-edge);
    border-radius:6px;
    pointer-events:none;
  }
  .tag-btn:hover{
    background:#F8F1DE;
    transform:translateY(-3px) rotate(-0.4deg);
    box-shadow:0 1px 0 rgba(0,0,0,0.15), 0 16px 26px -12px rgba(0,0,0,0.6);
  }
  .tag-btn:active{ transform:translateY(-1px) rotate(0deg); }
  .tag-btn:focus-visible{
    outline:2px solid var(--color-opcion, var(--thread));
    outline-offset:3px;
  }

  .tag-num{
    background:var(--color-opcion, var(--thread));
    width:2.5rem;
    height:2.5rem;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
  }

  /* Cada pieza tiene su caja porque sus proporciones no coinciden y una caja
     única las dejaría irreconocibles. Manda el alto, con una excepción: el
     pañuelo es cuadrado y se limita por el ancho, que si no desbordaría el
     disco. El pantalón medía 1:3,4 y con el alto de los demás se quedaba en
     9,6 px: su icono va recortado por la rodilla, y así entra en la misma
     proporción que el cuerpo y la manga sin necesitar excepción. */
  .tag-icon{
    overflow:visible;
    /* Tinta y no blanco: sobre el disco de color gana en las cinco opciones
       (4,6 la falda, 6,0 el cuerpo, 8,7 la manga, 7,0 el pantalón y 4,1 el rosa
       de la paleta, frente a 3,6 / 2,7 / 1,9 / 2,3 / 4,0 en blanco). En los
       tonos claros el trazo blanco casi desaparecía. */
    color:var(--ink);
    fill:none;
    stroke:currentColor;
    /* El grosor lo pone cada icono en su atributo style, porque el título de la
       ventana modal clona este SVG y le quita la clase: lo que se declare aquí
       no llega al clon, pero --trazo sí, y allí se multiplica. */
    stroke-width:var(--trazo, 6);
    stroke-linejoin:round;
    stroke-linecap:round;
  }
  [data-opcion="1"] .tag-icon{ width:1.27rem;  height:2.06rem; }
  [data-opcion="2"] .tag-icon{ width:1.055rem; height:2.06rem; }
  [data-opcion="3"] .tag-icon{ width:1.025rem; height:2.06rem; }
  [data-opcion="4"] .tag-icon{ width:1.08rem;  height:2.06rem; }
  [data-opcion="5"] .tag-icon{ width:1.45rem;  height:1.45rem;  }

  .tag-label{
    font-weight:600;
    font-size:1.02rem;
    line-height:1.2;
  }
  .tag-sub{
    display:block;
    font-family:var(--font-detalle);
    font-size:0.68rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--ink-soft);
    margin-top:0.15rem;
  }


  /* ---- Modal ---- */
  dialog#opcion-modal{
    border:none;
    padding:0;
    background:transparent;
    max-width:34rem;
    width:calc(100% - 2.5rem);
    max-height:calc(100vh - 2.5rem);
    border-radius:16px;
    overflow:visible;
  }
  dialog#opcion-modal::backdrop{
    background:rgba(10, 20, 17, 0.72);
    backdrop-filter:blur(2px);
  }
  dialog#opcion-modal[open]{
    animation:cardIn 220ms cubic-bezier(.2,.8,.3,1) both;
  }
  @keyframes cardIn{
    from{ opacity:0; transform:translateY(10px) scale(0.97); }
    to{ opacity:1; transform:translateY(0) scale(1); }
  }
  @media (prefers-reduced-motion: reduce){
    dialog#opcion-modal[open]{ animation:none; }
  }

  /* Modal ampliado para alojar la herramienta interactiva de la Opción 1 */
  dialog#opcion-modal.modal-wide{
    max-width:70rem;
  }
  dialog#opcion-modal.modal-wide .card{
    display:flex;
    flex-direction:column;
    overflow:hidden;
    /* Abajo menos que arriba: arriba el hueco lo llenan el título y la
       descripción, y abajo se sumaba al relleno propio de la herramienta,
       que ya trae 18px de caja más lo que deje su columna más corta. */
    padding:1.6rem 1.8rem 0.9rem;
  }
  /* El alto lo fija app.js con el que cada herramienta declara por postMessage:
     una con nueve mandos es mucho más alta que otra con cuatro, y con una
     altura fija la de más mandos se corta. El max-height lo pone también
     app.js, con lo que quepa en la ventana.
     Nace SIN desplazamiento y app.js solo lo activa cuando la herramienta de
     verdad no cabe: con overflow-y:auto permanente, un desbordamiento de una
     fracción de píxel —redondeos de la escala del sistema, por ejemplo— sacaba
     una barra que no servía para nada. */
  /* Visible siempre: las cinco opciones llevan herramienta embebida. Estaba
     oculto de partida porque antes había opciones sin ella, que enseñaban en
     su lugar una calculadora genérica. */
  .iframe-wrap{
    display:block;
    position:relative;
    height:auto;
    width:100%;
    border-radius:10px;
    overflow:hidden;
  }
  .iframe-wrap iframe{
    display:block;
    width:100%;
    height:610px;
    border:0;
    overflow:hidden;
  }
  .iframe-loading{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff;
    font-family:var(--font-detalle);
    font-size:1.08rem;
    font-weight:600;
    color:var(--ink-soft);
    letter-spacing:0.04em;
  }
  @media (max-width: 30rem){
    dialog#opcion-modal.modal-wide{ max-width:calc(100% - 1.5rem); }
  }
  dialog#opcion-modal.modal-wide h2{
    margin-bottom:0.4rem;
  }
  dialog#opcion-modal.modal-wide p{
    margin-bottom:0.9rem;
  }

  .card{
    position:relative;
    background:var(--paper);
    color:var(--ink);
    border-radius:14px;
    padding:2.4rem 2.2rem 2.2rem;
    box-shadow:0 30px 60px -20px rgba(0,0,0,0.6);
  }
  .card::before{
    content:"";
    position:absolute;
    inset:9px;
    border:1.5px dashed var(--paper-edge);
    border-radius:9px;
    pointer-events:none;
  }

  .card-close{
    position:absolute;
    top:12px;
    right:12px;
    width:36px;
    height:36px;
    border-radius:50%;
    background:var(--pin);
    border:3px solid var(--paper);
    color:var(--ink);
    font-family:var(--font-body);
    font-size:1.1rem;
    line-height:1;
    cursor:pointer;
    box-shadow:0 6px 14px -6px rgba(0,0,0,0.6);
    transition:transform 140ms ease;
  }
  .card-close:hover{ transform:rotate(90deg); }
  .card-close:focus-visible{ outline:2px solid var(--thread); outline-offset:2px; }

  .card h2{
    font-family:var(--font-display);
    font-weight:700;
    color:var(--color-opcion, var(--ink));
    font-size:1.9rem;
    margin:0 0 0.9rem;
    display:flex;
    align-items:center;
    gap:0.6rem;
  }
  #modal-titulo-texto{ text-wrap:balance; }

  /* El icono se clona del botón que abre la ventana; height:1em lo ata al
     cuerpo del título y el ancho sale solo de la proporción de su viewBox. */
  .titulo-icono:empty{ display:none; }
  .titulo-icono{ display:flex; flex-shrink:0; }
  .titulo-icono svg{
    height:1em;
    width:auto;
    overflow:visible;
    fill:none;
    stroke:var(--color-opcion, var(--ink));
    /* Un 80 % más grueso que en el botón: allí el icono va sobre el disco de
       color y aquí compite con una Fraunces de 700, donde el mismo trazo se
       veía escuálido al lado del título. Se multiplica en vez de fijarse
       porque cada pieza trae su propio --trazo —sus viewBox tienen escalas
       muy distintas— y el clon lo arrastra en su atributo style. */
    stroke-width:calc(var(--trazo, 6) * 1.8);
    stroke-linejoin:round;
    stroke-linecap:round;
  }
  .card p{
    font-size:0.98rem;
    line-height:1.55;
    color:var(--ink-soft);
    margin:0 0 1.6rem;
  }

  @media (max-width: 30rem){
    .calc-row{ grid-template-columns:1fr; }
    .card{ padding:2rem 1.4rem 1.8rem; }
  }

  /* ---- La ficha de toma de medidas ---- */

  /* Sin disco de color, el texto se centra: si se quedara a la izquierda, donde
     empieza en los otros cinco, el hueco del icono ausente parecería una imagen
     que no ha cargado. El filete de puntos toma el color de la opción, que es
     lo único que queda para llevarlo. */
  .tag-btn-ficha{
    /* Papel distinto, el mismo tono que llevan las filas de descarga dentro de
       su ventana: el boton y lo que abre comparten hoja. Es tambien lo que lo
       separa de las cinco herramientas ademas del hueco. */
    background:var(--paper-2);
    justify-content:center;
    text-align:center;
    padding-left:1.4rem;
  }
  .tag-btn-ficha:hover{ background:#F0E3C4; }

  /* Los tramos. Cada umbral es el ancho de ventana en el que ese numero de
     columnas empieza a caber: n columnas piden n*168 + (n-1)*17,6 px, mas los
     48 de relleno de main. Van con unos pocos pixeles de holgura para no
     cambiar justo en el limite.
       2 columnas:  353,6 + 48 =  401,6  ->  25,5rem (408px)
       3 columnas:  539,2 + 48 =  587,2  ->  37rem   (592px)
       6 columnas: 1096,0 + 48 = 1144,0  ->  71,75rem (1148px)
     No hay tramo de 4 ni de 5: dejarian la ultima fila coja. */
  @media (min-width: 25.5rem){ .options{ grid-template-columns:repeat(2, 10.5rem); } }
  @media (min-width: 37rem){   .options{ grid-template-columns:repeat(3, 10.5rem); } }
  @media (min-width: 71.75rem){ .options{ grid-template-columns:repeat(6, 10.5rem); } }

  /* Con sitio de sobra para los seis en un renglon, la fila vuelve a ser
     flexible y la ficha recupera su hueco mayor: 40px hasta el Panuelo frente a
     los 17,6 de los demas. Ese margen dentro de la rejilla correria una columna
     y romperia la alineacion, por eso las dos cosas van juntas aqui.
     74rem y no otro numero: los seis en una linea piden 6x168 + 4x17,6 + 40 =
     1118,4px, mas los 48 de relleno de main son 1166,4. A 1184 quedan 17,6 de
     holgura -justo un hueco de mas- para que el cambio de modo no coincida con
     el punto en que la fila se parte y no quede una franja de anchuras con el
     margen puesto y las columnas ya rotas. En rem a proposito: si se agranda la
     letra del navegador, el umbral crece con los botones. */
  @media (min-width: 74rem){
    .options{ display:flex; flex-wrap:wrap; }
    .tag-btn-ficha{ margin-left:1.4rem; }
  }
  .tag-btn-ficha::before{
    border-color:var(--color-opcion, var(--paper-edge));
  }

  /* El atributo hidden lo pone y lo quita app.js, pero .iframe-wrap declara
     display:block y una declaración de la hoja gana siempre al hidden del
     navegador. Sin estas dos reglas la lista y la herramienta se verían a la
     vez. */
  .iframe-wrap[hidden],
  .fichas[hidden]{ display:none; }

  .fichas{
    list-style:none;
    margin:0 0 0.4rem;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:0.5rem;
  }

  /* Cada ficha es un enlace con descarga, no un botón: así el menú contextual
     del navegador ofrece "guardar enlace como" y la rueda del ratón abre en
     pestaña nueva, cosas que un <button> con JavaScript quita sin dar nada a
     cambio. */
  .ficha-btn{
    display:grid;
    grid-template-columns:1fr auto;
    align-items:baseline;
    gap:0.1rem 0.8rem;
    padding:0.7rem 0.9rem;
    border-radius:8px;
    background:var(--paper-2);
    border:1px solid var(--paper-edge);
    color:var(--ink);
    text-decoration:none;
    transition:background 140ms ease, transform 140ms ease, border-color 140ms ease;
  }
  .ficha-btn:hover{
    background:#F8F1DE;
    border-color:var(--color-opcion, var(--ink));
    transform:translateX(2px);
  }
  .ficha-btn:focus-visible{
    outline:2px solid var(--color-opcion, var(--thread));
    outline-offset:2px;
  }
  .ficha-nombre{
    font-weight:600;
    font-size:1rem;
    line-height:1.25;
  }
  /* El peso ocupa la segunda columna y las dos filas: queda alineado a la
     derecha, a la altura del nombre, y no empuja al detalle. */
  .ficha-peso{
    grid-column:2;
    grid-row:1 / span 2;
    align-self:center;
    font-family:var(--font-detalle);
    font-size:0.72rem;
    font-variant-numeric:tabular-nums;
    letter-spacing:0.04em;
    color:var(--ink-soft);
    white-space:nowrap;
  }
  .ficha-detalle{
    grid-column:1;
    font-size:0.82rem;
    line-height:1.35;
    color:var(--ink-soft);
  }