/*
   TIENDA — Soldado y Coketa:

   CSS base: catálogo en tarjetas + formulario de encargo
   personalizado (con selección de catálogo sin JavaScript,
   técnica "checkbox hack") + formulario de acceso de clientas.

   Usa var(), clamp(), transition en :hover/:focus-visible y
   :nth-child (filas alternas de la guía de tallas). 
*/

body {
  margin: 0;
  background-color: var(--color-negro);
  color: var(--color-blanco);
  font-family: var(--fuente-cuerpo);
}

.intro {
  padding: 3rem 1.5rem 1rem;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.intro h1 {
  font-family: var(--fuente-display);
  color: var(--color-rosa);
  font-size: clamp(2rem, 5vw, 3rem);
  letter-spacing: 0.03em;
  margin-bottom: 0.75rem;
}

.intro p {
  line-height: 1.6;
  color: var(--color-gris);
}

/* Catálogo (tarjetas de producto) */
.catalogo {
  padding: 1.5rem 1.5rem 3rem;
  max-width: 1100px;
  margin: 0 auto;
}

.catalogo h2 {
  font-family: var(--fuente-display);
  color: var(--color-rosa);
  text-align: center;
  font-size: clamp(1.5rem, 4vw, 2rem);
  margin-bottom: 1.5rem;
}

.catalogo__lista {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Selector de CLASE: cada prenda es un <article> autónomo, con su
   propia imagen, nombre, descripción y precio 
*/
.producto {
  position: relative;
  background-color: var(--color-gris-oscuro);
  border: 1px solid #2c2c2c;
  width: 240px;
  padding: 1rem;
  text-align: center;
  transition: border-color 0.2s ease;
}

/* Las fotos son mockups horizontales (delante y detrás): se ven
   enteras (contain), todas a la misma altura para que las tarjetas
   queden alineadas 
*/
.producto img {
  width: 100%;
  height: 180px;
  object-fit: contain;
  display: block;
  margin: 0 auto 0.75rem;
}

.producto h3 {
  font-family: var(--fuente-display);
  font-size: 1rem;
  letter-spacing: 0.03em;
  margin: 0 0 0.4rem;
}

.producto p {
  font-size: 0.85rem;
  color: var(--color-gris);
  line-height: 1.4;
  margin: 0 0 0.6rem;
}

.producto__precio {
  font-family: var(--fuente-display);
  color: var(--color-rosa);
  font-size: 1.1rem;
}

/* Etiquetas ancladas a la esquina de la tarjeta: 
   van en un contenedor para que, si una prenda tiene varias, se apilen en vez de solaparse 
*/
.producto__badges {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.3rem;
  z-index: 1;
}

.producto__badge {
  background-color: var(--color-rosa);
  color: var(--color-negro);
  font-family: var(--fuente-display);
  font-size: 0.65rem;
  letter-spacing: 0.03em;
  padding: 0.25rem 0.6rem;
}

/* El label hace de botón: el control real es el checkbox oculto. */
.producto__anadir {
  display: inline-block;
  background-color: var(--color-rosa);
  color: var(--color-negro);
  font-family: var(--fuente-display);
  letter-spacing: 0.04em;
  font-size: 0.85rem;
  padding: 0.6rem 1.2rem;
  border: 2px solid var(--color-rosa);
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.producto__anadir:hover {
  background-color: var(--color-rosa-palido);
}

/* "Quitar del pedido" solo se ve cuando la prenda está marcada */
.producto__txt-quitar {
  display: none;
}

/* "Añadir al pedido" sin JavaScript:
   input[type=checkbox]:checked + combinador de hermanos general (~). 
   Los checkboxes están ocultos visualmente pero siguen
   siendo accesibles por teclado y lector de pantalla. 
   Es repetitivo (un bloque de reglas por producto) porque el checkbox 
   hack no se puede generalizar sin JavaScript ni un preprocesador CSS. 
*/

.prod-check {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

#prod-advertisements:checked ~ .catalogo .producto[data-prod="advertisements"],
#prod-exmaquina:checked ~ .catalogo .producto[data-prod="exmaquina"],
#prod-for-bigboys:checked ~ .catalogo .producto[data-prod="for-bigboys"],
#prod-kates-on-crack:checked ~ .catalogo .producto[data-prod="kates-on-crack"],
#prod-most-hated:checked ~ .catalogo .producto[data-prod="most-hated"],
#prod-msga:checked ~ .catalogo .producto[data-prod="msga"],
#prod-ojos-de-angel:checked ~ .catalogo .producto[data-prod="ojos-de-angel"],
#prod-playgirl:checked ~ .catalogo .producto[data-prod="playgirl"],
#prod-reveal:checked ~ .catalogo .producto[data-prod="reveal"],
#prod-xpert:checked ~ .catalogo .producto[data-prod="xpert"] {
  border-color: var(--color-rosa);
}

/* Prenda marcada: el botón invierte sus colores (fondo negro, texto
   rosa) y cambia "Añadir al pedido" por "Quitar del pedido" 
*/

#prod-advertisements:checked
  ~ .catalogo
  .producto[data-prod="advertisements"]
  .producto__anadir,
#prod-exmaquina:checked
  ~ .catalogo
  .producto[data-prod="exmaquina"]
  .producto__anadir,
#prod-for-bigboys:checked
  ~ .catalogo
  .producto[data-prod="for-bigboys"]
  .producto__anadir,
#prod-kates-on-crack:checked
  ~ .catalogo
  .producto[data-prod="kates-on-crack"]
  .producto__anadir,
#prod-most-hated:checked
  ~ .catalogo
  .producto[data-prod="most-hated"]
  .producto__anadir,
#prod-msga:checked ~ .catalogo .producto[data-prod="msga"] .producto__anadir,
#prod-ojos-de-angel:checked
  ~ .catalogo
  .producto[data-prod="ojos-de-angel"]
  .producto__anadir,
#prod-playgirl:checked
  ~ .catalogo
  .producto[data-prod="playgirl"]
  .producto__anadir,
#prod-reveal:checked
  ~ .catalogo
  .producto[data-prod="reveal"]
  .producto__anadir,
#prod-xpert:checked ~ .catalogo .producto[data-prod="xpert"] .producto__anadir {
  background-color: var(--color-negro);
  color: var(--color-rosa);
}

#prod-advertisements:checked
  ~ .catalogo
  .producto[data-prod="advertisements"]
  .producto__txt-anadir,
#prod-exmaquina:checked
  ~ .catalogo
  .producto[data-prod="exmaquina"]
  .producto__txt-anadir,
#prod-for-bigboys:checked
  ~ .catalogo
  .producto[data-prod="for-bigboys"]
  .producto__txt-anadir,
#prod-kates-on-crack:checked
  ~ .catalogo
  .producto[data-prod="kates-on-crack"]
  .producto__txt-anadir,
#prod-most-hated:checked
  ~ .catalogo
  .producto[data-prod="most-hated"]
  .producto__txt-anadir,
#prod-msga:checked
  ~ .catalogo
  .producto[data-prod="msga"]
  .producto__txt-anadir,
#prod-ojos-de-angel:checked
  ~ .catalogo
  .producto[data-prod="ojos-de-angel"]
  .producto__txt-anadir,
#prod-playgirl:checked
  ~ .catalogo
  .producto[data-prod="playgirl"]
  .producto__txt-anadir,
#prod-reveal:checked
  ~ .catalogo
  .producto[data-prod="reveal"]
  .producto__txt-anadir,
#prod-xpert:checked
  ~ .catalogo
  .producto[data-prod="xpert"]
  .producto__txt-anadir {
  display: none;
}

#prod-advertisements:checked
  ~ .catalogo
  .producto[data-prod="advertisements"]
  .producto__txt-quitar,
#prod-exmaquina:checked
  ~ .catalogo
  .producto[data-prod="exmaquina"]
  .producto__txt-quitar,
#prod-for-bigboys:checked
  ~ .catalogo
  .producto[data-prod="for-bigboys"]
  .producto__txt-quitar,
#prod-kates-on-crack:checked
  ~ .catalogo
  .producto[data-prod="kates-on-crack"]
  .producto__txt-quitar,
#prod-most-hated:checked
  ~ .catalogo
  .producto[data-prod="most-hated"]
  .producto__txt-quitar,
#prod-msga:checked
  ~ .catalogo
  .producto[data-prod="msga"]
  .producto__txt-quitar,
#prod-ojos-de-angel:checked
  ~ .catalogo
  .producto[data-prod="ojos-de-angel"]
  .producto__txt-quitar,
#prod-playgirl:checked
  ~ .catalogo
  .producto[data-prod="playgirl"]
  .producto__txt-quitar,
#prod-reveal:checked
  ~ .catalogo
  .producto[data-prod="reveal"]
  .producto__txt-quitar,
#prod-xpert:checked
  ~ .catalogo
  .producto[data-prod="xpert"]
  .producto__txt-quitar {
  display: inline;
}

#prod-advertisements:focus-visible
  ~ .catalogo
  .producto[data-prod="advertisements"],
#prod-exmaquina:focus-visible ~ .catalogo .producto[data-prod="exmaquina"],
#prod-for-bigboys:focus-visible ~ .catalogo .producto[data-prod="for-bigboys"],
#prod-kates-on-crack:focus-visible
  ~ .catalogo
  .producto[data-prod="kates-on-crack"],
#prod-most-hated:focus-visible ~ .catalogo .producto[data-prod="most-hated"],
#prod-msga:focus-visible ~ .catalogo .producto[data-prod="msga"],
#prod-ojos-de-angel:focus-visible
  ~ .catalogo
  .producto[data-prod="ojos-de-angel"],
#prod-playgirl:focus-visible ~ .catalogo .producto[data-prod="playgirl"],
#prod-reveal:focus-visible ~ .catalogo .producto[data-prod="reveal"],
#prod-xpert:focus-visible ~ .catalogo .producto[data-prod="xpert"] {
  outline: 2px solid var(--color-rosa);
  outline-offset: 2px;
}

/* Línea del pedido: oculta hasta que su checkbox se marca */
.lista-pedido__linea {
  display: none;
}

#prod-advertisements:checked
  ~ .formularios
  .lista-pedido__linea[data-prod="advertisements"],
#prod-exmaquina:checked
  ~ .formularios
  .lista-pedido__linea[data-prod="exmaquina"],
#prod-for-bigboys:checked
  ~ .formularios
  .lista-pedido__linea[data-prod="for-bigboys"],
#prod-kates-on-crack:checked
  ~ .formularios
  .lista-pedido__linea[data-prod="kates-on-crack"],
#prod-most-hated:checked
  ~ .formularios
  .lista-pedido__linea[data-prod="most-hated"],
#prod-msga:checked ~ .formularios .lista-pedido__linea[data-prod="msga"],
#prod-ojos-de-angel:checked
  ~ .formularios
  .lista-pedido__linea[data-prod="ojos-de-angel"],
#prod-playgirl:checked
  ~ .formularios
  .lista-pedido__linea[data-prod="playgirl"],
#prod-reveal:checked ~ .formularios .lista-pedido__linea[data-prod="reveal"],
#prod-xpert:checked ~ .formularios .lista-pedido__linea[data-prod="xpert"] {
  display: list-item;
}

/* El mensaje de "vacío" se oculta en cuanto hay algo marcado */
#prod-advertisements:checked ~ .formularios .lista-pedido__vacio,
#prod-exmaquina:checked ~ .formularios .lista-pedido__vacio,
#prod-for-bigboys:checked ~ .formularios .lista-pedido__vacio,
#prod-kates-on-crack:checked ~ .formularios .lista-pedido__vacio,
#prod-most-hated:checked ~ .formularios .lista-pedido__vacio,
#prod-msga:checked ~ .formularios .lista-pedido__vacio,
#prod-ojos-de-angel:checked ~ .formularios .lista-pedido__vacio,
#prod-playgirl:checked ~ .formularios .lista-pedido__vacio,
#prod-reveal:checked ~ .formularios .lista-pedido__vacio,
#prod-xpert:checked ~ .formularios .lista-pedido__vacio {
  display: none;
}

.lista-pedido {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.9rem;
}

.lista-pedido__linea {
  padding: 0.4rem 0;
  border-bottom: 1px solid #3a3a3a;
}

.lista-pedido__vacio {
  color: var(--color-gris);
  font-size: 0.85rem;
}

/* Cómo hacer un encargo (aside) */
.como-funciona {
  max-width: 720px;
  margin: 0 auto 1.5rem;
  padding: 1.5rem 2rem;
  border: 1px solid var(--color-rosa);
  line-height: 1.6;
}

.como-funciona h2 {
  font-family: var(--fuente-display);
  color: var(--color-rosa);
  font-size: 1.3rem;
  margin: 0 0 0.75rem;
}

.como-funciona ol {
  margin: 0;
  padding-left: 1.2rem;
}

/* Guía de tallas (tabla) */
.tallas-section {
  padding: 1rem 1.5rem 2rem;
  max-width: 720px;
  margin: 0 auto;
}

.tallas-section h2 {
  font-family: var(--fuente-display);
  color: var(--color-rosa);
  text-align: center;
  font-size: clamp(1.5rem, 4vw, 2rem);
  margin-bottom: 1.5rem;
}

/* Selector de ELEMENTO: toda tabla del sitio comparte este estilo base */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

caption {
  caption-side: top;
  text-align: left;
  color: var(--color-gris);
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
}

th,
td {
  border: 1px solid #333333;
  padding: 0.65rem 0.9rem;
  line-height: 1.5;
}

thead th {
  background-color: var(--color-rosa);
  color: var(--color-negro);
  font-family: var(--fuente-display);
  letter-spacing: 0.03em;
}

/* Nombre de la talla (primera columna): 
   centrado y con la fuente de los títulos y descripción alineada a la izquierda.
*/
tbody th {
  font-family: var(--fuente-display);
  color: var(--color-rosa);
  text-align: center;
  white-space: nowrap;
}

tbody tr:nth-child(even) {
  background-color: var(--color-gris-oscuro);
}

tfoot td {
  color: var(--color-rosa);
  font-size: 0.85rem;
  text-align: center;
}

/* Formularios (encargo + acceso) */
.formularios {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  justify-content: center;
  align-items: flex-start;
  padding: 1.5rem 1.5rem 4rem;
  max-width: 1100px;
  margin: 0 auto;
}

/* Selector de CLASE: caja reutilizable para cada formulario */
.formulario {
  background-color: var(--color-gris-oscuro);
  border: 1px solid #2c2c2c;
  padding: 2rem;
  flex: 1 1 380px;
  max-width: 480px;
}

.formulario h2 {
  font-family: var(--fuente-display);
  color: var(--color-rosa);
  font-size: 1.4rem;
  margin-top: 0;
  margin-bottom: 1.5rem;
}

fieldset {
  border: 1px solid #3a3a3a;
  padding: 1rem 1.2rem 1.2rem;
  margin: 0 0 1.2rem;
  min-width: 0;
}

legend {
  font-family: var(--fuente-display);
  color: var(--color-rosa);
  padding: 0 0.5rem;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
}

.campo {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 1.1rem;
}

.campo label {
  font-size: 0.85rem;
  color: var(--color-gris);
}

.campo input,
.campo select,
.campo textarea {
  background-color: var(--color-negro);
  border: 1px solid var(--color-gris);
  color: var(--color-blanco);
  padding: 0.6rem 0.75rem;
  font-family: var(--fuente-cuerpo);
  font-size: 0.9rem;
}

.campo textarea {
  resize: vertical;
  min-height: 90px;
}

/* Pseudo-clase :focus-visible en todos los campos del formulario */
.campo input:focus-visible,
.campo select:focus-visible,
.campo textarea:focus-visible {
  outline: 2px solid var(--color-rosa);
  outline-offset: 1px;
  border-color: var(--color-rosa);
}

.campo--radios,
.campo--checks {
  gap: 0.5rem;
}

.opcion {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
}

.opcion label {
  color: var(--color-blanco);
  font-size: 0.9rem;
}

.formulario button {
  background-color: var(--color-rosa);
  color: var(--color-negro);
  border: none;
  padding: 0.75rem 1.6rem;
  font-family: var(--fuente-display);
  letter-spacing: 0.04em;
  cursor: pointer;
  width: 100%;
  transition: background-color 0.2s ease;
}

.formulario button:hover {
  background-color: var(--color-rosa-palido);
}

.formulario button:focus-visible {
  outline: 2px solid var(--color-blanco);
  outline-offset: 2px;
}

/* Media query: pantallas pequeñas (móvil) */
@media (max-width: 640px) {
  .formularios {
    flex-direction: column;
    align-items: stretch;
  }

  .formulario {
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
    min-width: 0;
  }

  /* Catálogo en 2 columnas: con una sola, las 10 prendas ocupaban
     una tira larguísima. Cada <li> ocupa la mitad menos medio hueco,
     y la tarjeta se estira a todo el <li> para que todas midan igual. 
  */
  .catalogo {
    padding: 1rem 0.75rem 2rem;
  }

  .catalogo__lista {
    gap: 0.75rem;
    align-items: stretch;
  }

  .catalogo__lista li {
    display: flex;
    width: calc(50% - 0.375rem);
  }

  /* Columna flex con el botón empujado abajo (margin-top: auto), para
     que los botones queden alineados aunque un nombre ocupe 2 líneas 
  */
  .producto {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 0.6rem 0.5rem 0.8rem;
  }

  .producto__anadir {
    margin-top: auto;
  }

  .producto img {
    height: 110px;
    margin-bottom: 0.5rem;
  }

  .producto h3 {
    font-size: 0.85rem;
  }

  .producto__badges {
    top: 0.3rem;
    right: 0.3rem;
  }

  .producto__badge {
    font-size: 0.55rem;
    padding: 0.2rem 0.4rem;
  }

  .producto__anadir {
    font-size: 0.72rem;
    padding: 0.5rem 0.6rem;
  }

  .como-funciona {
    margin: 0 1.5rem 1.5rem;
    padding: 1.2rem;
  }

  th,
  td {
    padding: 0.45rem 0.5rem;
    font-size: 0.8rem;
  }
}