/* ===========================================================================
   Studio Merch — hoja de estilos
   ---------------------------------------------------------------------------
   Organización del archivo (en este orden):

     1. Tokens de marca      — los colores, tipografías y medidas, una sola vez
     2. Base                 — reset mínimo y estilos de elementos sueltos
     3. Utilidades           — clases chicas que se reusan en todos lados
     4. Secciones            — una por bloque de la página, en orden de aparición
     5. Responsive           — los ajustes para pantallas chicas

   Para alguien que viene de C: los `--nombre: valor` del bloque `:root` son
   constantes globales. Donde dice `var(--verde)` el navegador sustituye el
   valor, igual que un #define. Cambiás el color en un solo lugar y se
   actualiza toda la página. Por eso NO hay códigos de color sueltos más
   abajo: si aparece uno, es un error.
   =========================================================================== */


/* ---------------------------------------------------------------------------
   1. TOKENS DE MARCA
   --------------------------------------------------------------------------- */
:root {
  /* Paleta. Sale del manual de marca. */
  --crema:        #F0EBE4;  /* fondo principal */
  --crema-oscuro: #E3DCD2;  /* fondo de tarjetas y marcos de foto */
  --tinta:        #1C1C1A;  /* texto principal y bloques oscuros */
  --verde:        #435B4A;  /* acento principal: botones y destacados */
  --lila:         #C8B4D0;  /* acento secundario, se usa poco a propósito */
  --neutro:       #B8B1A7;  /* franja de técnicas */
  --blanco:       #FFFFFF;

  /* Grises derivados. Todos verificados con contraste suficiente
     sobre --crema (mínimo 4.5:1, que es lo que exige accesibilidad). */
  --texto-2:      #4A463F;  /* texto secundario sobre crema */
  --texto-3:      #6B655C;  /* notas al pie, texto chico */
  --borde:        #DDD5C9;  /* líneas divisorias sobre crema */
  --borde-form:   #D3CBC0;  /* bordes de campos del formulario */

  /* Equivalentes sobre fondo oscuro (--tinta). */
  --texto-claro:  #C9C3BA;
  --texto-tenue:  #A8A298;
  --borde-oscuro: #3D3A36;

  /* Tipografía.
     La familia real viene del kit de Adobe Fonts que carga el <head>.
     Inter y system-ui quedan de respaldo por si el kit no carga:
     el navegador baja por la lista hasta encontrar una que tenga. */
  --fuente: "neue-haas-grotesk-display", "neue-haas-grotesk-text",
            Inter, system-ui, -apple-system, sans-serif;

  /* Medidas. El ancho máximo del contenido y el margen lateral
     se repiten en cada sección, así que viven acá. */
  --ancho:  1240px;
  --lateral: clamp(20px, 5vw, 56px);  /* crece con la pantalla, con topes */
  --alto-seccion: clamp(56px, 8vw, 110px);
  --radio: 4px;
  --radio-pill: 999px;
}


/* ---------------------------------------------------------------------------
   2. BASE
   --------------------------------------------------------------------------- */

/* border-box hace que padding y borde entren DENTRO del ancho declarado.
   Sin esto, un elemento de 300px con 20px de padding mide 340px y todos
   los cálculos de layout se corren. */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--fuente);
  background: var(--crema);
  color: var(--tinta);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
a { color: inherit; }
a:hover { opacity: 0.72; }
button { font-family: inherit; cursor: pointer; }
button:hover { opacity: 0.86; }
input, select, textarea { font-family: inherit; }

/* Marca de foco visible al navegar con teclado. No se saca nunca:
   es lo único que ve quien no usa mouse. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--tinta);
  outline-offset: 3px;
}

/* Respeta a quien pidió menos animación en su sistema operativo. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}


/* ---------------------------------------------------------------------------
   3. UTILIDADES
   --------------------------------------------------------------------------- */

/* Contenedor centrado con el margen lateral estándar. */
.contenedor {
  max-width: var(--ancho);
  margin: 0 auto;
  padding-left: var(--lateral);
  padding-right: var(--lateral);
}

.seccion { padding-top: var(--alto-seccion); padding-bottom: var(--alto-seccion); }

/* El "wordmark": el tratamiento tipográfico del logo, que se reusa en
   todos los títulos. Peso máximo, tracking negativo, interlineado ajustado. */
.wm { font-weight: 800; letter-spacing: -0.045em; line-height: 0.92; }

.titulo-seccion { font-size: clamp(30px, 4vw, 52px); }

/* Toda foto dentro de un marco con proporción fija se recorta al centro
   sin deformarse. El marco define la proporción; la foto la llena. */
.marco { overflow: hidden; background: var(--crema-oscuro); border-radius: var(--radio); }
.marco--3-4 { aspect-ratio: 3 / 4; }
.marco--1-1 { aspect-ratio: 1 / 1; }
.marco--4-3 { aspect-ratio: 4 / 3; }
.marco > img { width: 100%; height: 100%; object-fit: cover; }

/* Botones. Dos variantes: relleno (acción principal) y contorno. */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;          /* 44px es el mínimo táctil; 54 da aire */
  padding: 0 32px;
  border-radius: var(--radio-pill);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
}
.boton--relleno  { background: var(--verde); color: var(--crema); }
.boton--contorno { border-color: var(--tinta); color: var(--tinta); }
.boton--chico    { min-height: 44px; padding: 0 24px; font-size: 14.5px; }

/* Etiqueta chica en mayúsculas, para los rótulos de sección. */
.rotulo {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Píldora: las etiquetas de categoría y los items de cada kit. */
.pildora {
  border: 1px solid #C9C0B3;
  border-radius: var(--radio-pill);
  padding: 9px 18px;
  font-size: 14.5px;
  color: var(--texto-2);
}

/* Oculta visualmente pero lo sigue leyendo un lector de pantalla. */
.solo-lectores {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}


/* ---------------------------------------------------------------------------
   4. SECCIONES
   --------------------------------------------------------------------------- */

/* --- Barra de aviso superior --- */
.aviso {
  background: var(--tinta);
  color: var(--crema);
  font-size: 13.5px;
  text-align: center;
  padding: 11px 20px;
}
.aviso strong { font-weight: 600; }

/* --- Cabecera --- */
.cabecera {
  position: sticky;      /* queda pegada arriba al hacer scroll */
  top: 0;
  z-index: 10;
  background: var(--crema);
  border-bottom: 1px solid var(--borde);
}
.cabecera__fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 36px;
  padding-top: 18px;
  padding-bottom: 18px;
}
.cabecera__logo { flex: none; display: block; line-height: 0; }
.cabecera__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 26px;
  flex: 1 1 260px;
  font-size: 14.5px;
  font-weight: 500;
}
.cabecera__nav a { text-decoration: none; }

/* --- Hero --- */
.hero { padding-top: clamp(44px, 7vw, 92px); padding-bottom: clamp(30px, 4vw, 48px); }
.hero__rotulo { color: var(--verde); margin-bottom: clamp(22px, 2.6vw, 34px); letter-spacing: 0.1em; font-size: 13px; }
.hero__titulo { font-size: clamp(42px, 8vw, 104px); max-width: 13em; margin-bottom: clamp(28px, 3.5vw, 44px); }
.hero__pie { display: flex; flex-wrap: wrap; gap: 32px 56px; align-items: flex-end; justify-content: space-between; }
.hero__bajada { flex: 1 1 400px; font-size: clamp(17px, 1.7vw, 21px); line-height: 1.5; color: var(--texto-2); max-width: 32em; }
.hero__acciones { display: flex; flex-wrap: wrap; gap: 12px; flex: none; }

/* --- Franja de cuatro fotos --- */
.franja {
  display: grid;
  /* auto-fit + minmax: mete todas las columnas que entren de al menos 230px.
     En celular queda una sola, en escritorio cuatro. Sin media queries. */
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  padding-bottom: clamp(56px, 7vw, 96px);
}

/* --- Bloques de fondo oscuro (propuesta y proceso) --- */
.oscuro { background: var(--tinta); color: var(--crema); }
.oscuro p { color: var(--texto-claro); }

.propuesta__fila { display: flex; flex-wrap: wrap; gap: 48px 72px; }
.propuesta__titulo { flex: 1 1 360px; max-width: 11em; }
.propuesta__texto {
  flex: 1 1 340px;
  display: flex;
  flex-direction: column;
  gap: 26px;
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.62;
}

/* --- Productos --- */
.encabezado-doble {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 40px;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: clamp(32px, 4vw, 52px);
}
.encabezado-doble p { font-size: 16px; color: var(--texto-2); max-width: 26em; }

.grilla-productos { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 20px; }
.producto { display: flex; flex-direction: column; gap: 18px; }
.producto h3 { font-size: 23px; }
.producto p { font-size: 15.5px; line-height: 1.6; color: var(--texto-2); }

.categorias { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: clamp(32px, 4vw, 48px); }
.categorias__consulta { border-radius: var(--radio-pill); padding: 9px 18px; font-size: 14.5px; font-weight: 600; color: var(--verde); }

/* --- Técnicas --- */
.tecnicas { background: var(--neutro); }
.tecnicas p { color: #2E2B26; }
.tecnicas__intro { font-size: 17px; line-height: 1.55; max-width: 38em; margin-bottom: clamp(36px, 4vw, 56px); }
/* El gap de 1px sobre un fondo más oscuro dibuja las líneas divisorias
   de la grilla sin necesidad de bordes en cada tarjeta. */
.tecnicas__grilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px;
  background: #9A9289;
  border: 1px solid #9A9289;
}
.tecnica { background: var(--neutro); padding: 30px 26px; display: flex; flex-direction: column; gap: 12px; min-height: 210px; }
.tecnica h3 { font-size: 21px; }
.tecnica p { font-size: 15px; line-height: 1.6; }
.tecnica__ideal {
  margin-top: auto;           /* empuja esta línea al fondo de la tarjeta */
  padding-top: 14px;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #514C45;
}

/* --- Kits --- */
.grilla-kits { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.kit { border-radius: var(--radio); overflow: hidden; display: flex; flex-direction: column; background: var(--crema-oscuro); }
.kit--lila { background: var(--lila); }
.kit__cuerpo { padding: 28px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.kit h3 { font-size: 22px; }
.kit p { font-size: 15.5px; line-height: 1.6; color: #3A362F; }
.kit__items { margin-top: auto; padding-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.kit__items li { border: 1px solid #A49C92; border-radius: var(--radio-pill); padding: 6px 14px; font-size: 13.5px; color: #3A362F; }

/* --- Proceso --- */
.proceso__intro { font-size: 17px; line-height: 1.55; max-width: 36em; margin-bottom: clamp(40px, 5vw, 64px); }
.pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 34px; }
.paso { display: flex; flex-direction: column; gap: 13px; border-top: 2px solid var(--borde-oscuro); padding-top: 22px; }
.paso--primero { border-top-color: var(--verde); }       /* el primero lleva el acento */
.paso__num { font-size: 13px; letter-spacing: 0.1em; color: #8C8780; }
.paso--primero .paso__num { color: var(--verde); }
.paso h3 { font-size: 21px; }
.paso p { font-size: 15.5px; line-height: 1.6; }

/* --- Presupuesto --- */
.presupuesto__fila { display: flex; flex-wrap: wrap; gap: 48px 64px; }
.presupuesto__texto { flex: 1 1 320px; min-width: 0; }
.presupuesto__texto > p { font-size: 17px; line-height: 1.6; color: var(--texto-2); margin-bottom: 32px; max-width: 28em; }
.incluye { display: flex; flex-direction: column; gap: 16px; font-size: 15.5px; color: #3A362F; margin-bottom: 34px; }
.incluye li { display: flex; gap: 13px; align-items: flex-start; }
.incluye svg { flex: none; margin-top: 2px; }

.contacto { border-top: 1px solid var(--borde); padding-top: 26px; display: flex; flex-direction: column; gap: 12px; font-size: 15.5px; }
.contacto a { display: flex; align-items: center; gap: 11px; text-decoration: none; font-weight: 600; }
.contacto svg { flex: none; }

/* --- Formulario --- */
.formulario {
  flex: 999 1 420px;          /* crece mucho más que la columna de texto */
  min-width: 0;               /* permite encogerse por debajo del contenido */
  background: var(--blanco);
  border-radius: 6px;
  padding: clamp(26px, 3.2vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.campos-par { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 20px; }
.campo { display: flex; flex-direction: column; gap: 8px; }
.campo label { font-size: 13px; font-weight: 600; letter-spacing: 0.02em; }
.campo input, .campo select, .campo textarea {
  border: 1px solid var(--borde-form);
  border-radius: var(--radio);
  font-size: 15px;
  background: #FDFCFA;
  color: var(--tinta);
}
.campo input, .campo select { min-height: 46px; padding: 0 13px; }
.campo textarea { padding: 12px 13px; resize: vertical; }
.campo input::placeholder, .campo textarea::placeholder { color: #8E887F; }

/* Campo marcado como inválido por el script. */
.campo input[aria-invalid="true"],
.campo textarea[aria-invalid="true"] { border-color: #A33A2A; border-width: 2px; }

.formulario__acciones { display: flex; flex-wrap: wrap; gap: 12px; }
.formulario__acciones .boton { flex: 1 1 180px; }
.formulario__nota { font-size: 13px; color: var(--texto-3); text-align: center; line-height: 1.5; }

/* Mensaje de respuesta del formulario. Arranca oculto; el script le
   saca el atributo hidden cuando hay algo que decir. */
.formulario__aviso {
  font-size: 14.5px;
  line-height: 1.5;
  padding: 12px 14px;
  border-radius: var(--radio);
  background: var(--crema-oscuro);
  color: var(--tinta);
}
.formulario__aviso[hidden] { display: none; }
.formulario__aviso--error { background: #F6E3DF; color: #7A2A1C; }
.formulario__aviso--ok    { background: #E1EBE3; color: #27402F; }

/* --- Tienda --- */
.tienda { border-top: 1px solid var(--borde); }
.tienda__fila {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 48px;
  align-items: center;
  justify-content: space-between;
  padding-top: clamp(40px, 5vw, 64px);
  padding-bottom: clamp(40px, 5vw, 64px);
}
.tienda__texto { flex: 1 1 380px; min-width: 0; }
.tienda h2 { font-size: clamp(21px, 2.4vw, 28px); margin-bottom: 10px; }
.tienda p { font-size: 16px; line-height: 1.55; color: var(--texto-2); max-width: 36em; }
.tienda p a { font-weight: 600; }

/* --- Pie --- */
.pie { background: var(--tinta); color: var(--crema); }
.pie__fila {
  display: flex;
  flex-wrap: wrap;
  gap: 40px 56px;
  justify-content: space-between;
  padding-top: clamp(48px, 6vw, 76px);
  padding-bottom: 30px;
}
.pie__marca { flex: 1 1 300px; }
.pie__logo { display: block; margin-bottom: 24px; }
.pie__marca p { font-size: 15px; line-height: 1.6; color: var(--texto-tenue); max-width: 22em; }
.pie__nav { flex: 0 1 auto; display: flex; flex-wrap: wrap; gap: 44px; font-size: 14.5px; }
.pie__nav ul { display: flex; flex-direction: column; gap: 11px; }
.pie__nav a { text-decoration: none; color: var(--texto-tenue); }
.pie__legal { padding-bottom: 44px; font-size: 12.5px; color: #78736B; }


/* ---------------------------------------------------------------------------
   5. RESPONSIVE
   ---------------------------------------------------------------------------
   Casi todo el layout ya se adapta solo, porque usa flex-wrap y
   grid auto-fit en vez de anchos fijos. Acá quedan solo los casos
   que esas dos herramientas no cubren.
   --------------------------------------------------------------------------- */

@media (max-width: 700px) {
  /* En celular la cabecera pegajosa come demasiada pantalla. */
  .cabecera { position: static; }

  /* La franja de arriba pasa a dos columnas en vez de una.
     Apiladas de a una, esas cuatro fotos son casi cuatro pantallas de
     scroll antes de llegar al primer texto, y mucha gente abandona ahí.
     De a dos se ven todas juntas y sigue leyéndose bien. */
  .franja { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

  /* Los botones del hero y del formulario pasan a ancho completo:
     son más fáciles de tocar con el pulgar.

     Ojo con el detalle: el contenedor de los botones del hero es
     `flex: none`, o sea que se mide por su contenido. Si a los hijos les
     damos `width: 100%` sin tocar al padre, el 100% se calcula contra ese
     ancho ya medido y el bloque se pasa unos píxeles del borde (eran 25).
     Por eso primero obligamos al contenedor a ocupar el renglón entero. */
  .hero__acciones { flex: 1 1 100%; }

  .hero__acciones .boton,
  .formulario__acciones .boton { flex: 1 1 100%; }
}

/* Al imprimir (o guardar como PDF) sobran los fondos oscuros y la
   navegación. Esto no es un detalle de diseño: alguien va a imprimir
   esta página para mostrarla en una reunión. */
@media print {
  .aviso, .cabecera, .formulario, .categorias__consulta { display: none; }
  .oscuro, .tecnicas, .pie { background: var(--blanco) !important; color: var(--tinta) !important; }
  .oscuro p, .pie__marca p, .pie__nav a { color: var(--texto-2) !important; }
  body { background: var(--blanco); }
}