/* Espacio Mirada — landing. Dos colores de marca, tipografia Poppins self-hosted. */

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/poppins-400.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/poppins-500.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/poppins-700.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/poppins-800.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("fonts/poppins-900.woff2") format("woff2");
}

:root {
  --violeta: #8D5BA4;
  --violeta-duotono: #8F5C94;
  --violeta-oscuro: #6E3F85;
  --crema: #EEE8DA;
  --crema-texto: #EFE9DD;
  --crema-apagado: #DCD6CA;
  --blanco: #FFFFFF;
  --radio: 28px;
  --ancho-lectura: 640px;
  --ancho-ancho: 980px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: "Poppins", "Nunito Sans", "Montserrat", sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.55;
  color: #2C2530;
  background: var(--blanco);
}

/* height:auto es el fix: los atributos width/height del HTML se mapean como hints
   presentacionales (width/height en px), y max-width por si solo NO los pisa;
   sin height:auto la imagen queda con el alto natural fijo y se deforma. */
img { max-width: 100%; height: auto; display: block; }

a { color: var(--violeta); }

:focus-visible {
  outline: 3px solid var(--violeta-oscuro);
  outline-offset: 2px;
}

h1, h2, h3 {
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
  color: #2C2530;
}

h1 { font-size: clamp(30px, 7vw, 46px); font-weight: 900; }
h2 { font-size: clamp(24px, 5vw, 32px); }
h3 { font-size: 18px; text-transform: none; font-weight: 700; margin-bottom: 8px; }

p { margin: 0 0 16px; }

.bajada { font-size: 18px; color: #4A4048; }

main > section {
  padding: 48px 24px;
}

main > section > *,
.hero > * {
  max-width: var(--ancho-lectura);
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Barra de confianza ---------- */
.barra-confianza {
  background: var(--violeta);
  color: var(--crema-texto);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  text-align: center;
  padding: 10px 16px;
  line-height: 1.6;
}

/* ---------- Botón CTA ---------- */
.cta {
  display: inline-block;
  background: var(--violeta);
  color: var(--blanco);
  text-decoration: none;
  font-weight: 700;
  font-size: 17px;
  padding: 16px 32px;
  border-radius: 999px;
  text-align: center;
}
.cta:hover,
.cta:focus-visible {
  background: var(--violeta-oscuro);
  color: var(--blanco);
}

.hero { text-align: center; background: var(--blanco); padding-top: 56px; }
.hero .cta { margin: 8px 0 12px; }
.hero .micro { font-size: 15px; color: #6B6069; margin-bottom: 4px; }

.link-secundario {
  display: inline-block;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.link-secundario:hover,
.link-secundario:focus-visible {
  color: var(--violeta-oscuro);
}

/* ---------- El problema ---------- */
.problema { background: var(--crema); }
.pull-quote {
  color: var(--violeta);
  font-weight: 800;
  font-size: clamp(22px, 5vw, 28px);
  text-align: center;
  line-height: 1.25;
  margin: 32px auto;
}

/* ---------- Qué te llevás ---------- */
.que-te-llevas { background: var(--blanco); }
.experiencia-foto {
  margin: 0 auto 32px;
  max-width: var(--ancho-lectura);
}
.experiencia-foto img {
  border-radius: var(--radio);
  border: 2px solid var(--violeta);
}
.experiencia-foto figcaption {
  font-size: 13px;
  color: #756B72;
  margin-top: 8px;
  text-align: center;
}

.items { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
.items li { display: flex; gap: 16px; align-items: flex-start; }
.icono {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  stroke: var(--violeta);
  stroke-width: 1.6;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-top: 2px;
}
.items p { margin: 0; color: #4A4048; }

/* ---------- Comparativa ---------- */
.comparativa { background: var(--crema); }
.comparativa h2 { text-align: center; margin-bottom: 32px; }
.columnas {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: var(--ancho-ancho);
  margin: 0 auto;
}
.columna {
  background: var(--blanco);
  border: 2px solid var(--crema-apagado);
  border-radius: var(--radio);
  padding: 24px;
}
.columna-destacada { border-color: var(--violeta); }
.columna h3 {
  text-transform: uppercase;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.08em;
  color: var(--violeta);
}
.columna ul { margin: 0; padding-left: 20px; }
.columna li { margin-bottom: 12px; }
.columna li:last-child { margin-bottom: 0; }

/* ---------- Cómo trabajamos ---------- */
.como-trabajamos { background: var(--blanco); }
.pasos { list-style: none; margin: 32px 0; padding: 0; display: grid; gap: 28px; }
.pasos li { display: flex; gap: 16px; align-items: flex-start; }
.numero {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 2px solid var(--violeta);
  border-radius: 50%;
  color: var(--violeta);
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}
.pasos p { margin: 0; color: #4A4048; }
.cierre-seccion { font-weight: 600; color: #2C2530; }

/* ---------- Quién es Guille ---------- */
.quien-es-guille { background: var(--crema); }
.guille { display: flex; flex-direction: column; gap: 24px; max-width: var(--ancho-lectura); margin: 0 auto; }
.guille img {
  border-radius: var(--radio);
  border: 2px solid var(--violeta);
  max-width: 280px;
  margin: 0 auto;
}
.guille-texto p { color: #4A4048; }
.firma { font-weight: 700; color: #2C2530; margin-top: 8px; }

/* ---------- Precio ---------- */
.precio {
  background: var(--blanco);
  text-align: center;
}
.precio > * { max-width: 480px; }
.precio h2 { text-align: center; }
.monto {
  font-weight: 900;
  font-size: clamp(44px, 12vw, 64px);
  color: var(--violeta);
  /* solo top/bottom: el shorthand de 3 valores fijaba left/right en 0 y pisaba
     el margin-left/right:auto de "main > section > *" (mismo bug en .pills). */
  margin-top: 8px;
  margin-bottom: 24px;
}
.pills {
  list-style: none;
  margin-top: 0;
  margin-bottom: 28px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.pills li {
  border: 2px solid var(--violeta);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--violeta);
}
.precio .cta { margin-bottom: 12px; }
.precio .micro { font-size: 15px; color: #6B6069; }

/* ---------- Para quién es ---------- */
.para-quien { background: var(--crema); }
.para-quien h2 { text-align: center; }
.para-quien .columnas { max-width: var(--ancho-ancho); }

/* ---------- FAQ ---------- */
.faq { background: var(--blanco); }
.faq details {
  border-bottom: 1px solid var(--crema-apagado);
  padding: 18px 0;
}
.faq summary {
  cursor: pointer;
  font-weight: 700;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  flex: 0 0 auto;
  font-size: 22px;
  font-weight: 700;
  color: var(--violeta);
}
.faq details[open] summary::after { content: "\2212"; }
.faq summary:hover,
.faq summary:focus-visible {
  color: var(--violeta-oscuro);
}
.faq details p { margin-top: 14px; color: #4A4048; }

/* ---------- Cierre ---------- */
.cierre {
  background: var(--violeta);
  color: var(--crema-texto);
  text-align: center;
}
.cierre h2 { color: var(--crema-texto); }
.cierre p { color: var(--crema-texto); }
.cierre .cta {
  background: var(--violeta-duotono);
  color: var(--crema-texto);
  border: 2px solid var(--crema-texto);
}
.cierre .cta:hover,
.cierre .cta:focus-visible {
  background: var(--crema-texto);
  color: var(--violeta-oscuro);
}

/* ---------- Desktop ---------- */
@media (min-width: 720px) {
  main > section { padding: 72px 40px; }
  .items { grid-template-columns: repeat(2, 1fr); max-width: var(--ancho-ancho); margin: 0 auto; column-gap: 40px; }
  .pasos { max-width: var(--ancho-ancho); margin-left: auto; margin-right: auto; }
  .columnas { flex-direction: row; }
  .columna { flex: 1; }
  .guille { flex-direction: row; align-items: center; max-width: var(--ancho-ancho); text-align: left; }
  .guille img { max-width: 320px; margin: 0; }
}