/* =========================================================
   Landing de registro · "10 cosas que deberías saber aunque tengas gestoría"
   Estilo alineado con la web actual de Consultoría Blogger
   ========================================================= */

:root {
  /* Colores de la web actual */
  --text: #5F727F;          /* texto principal */
  --heading: #596A79;       /* titulares y pie */
  --accent: #C56D81;        /* rosa empolvado: botones, iconos */
  --accent-dark: #A9566A;   /* hover del botón (más contraste) */
  --teal: #8FB6BD;          /* detalle secundario */
  --bg: #FFFFFF;
  --bg-alt: #F4F6F7;
  --bg-soft: #E8ECEF;

  --font-body: "Source Sans 3", "Source Sans Pro", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-head: "Montserrat", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  --radius: 10px;
  --max: 1100px;
}

*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
}

img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }

.container {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 20px;
}
.narrow { max-width: 760px; }
.center { text-align: center; }

/* ---------- Tipografía ---------- */
h1, h2, h3 {
  font-family: var(--font-head);
  color: var(--heading);
  margin: 0 0 .6em;
  line-height: 1.25;
}

h1 {
  font-size: clamp(1.9rem, 4.2vw, 2.75rem);
  font-weight: 700;
}

/* Titulares de sección en mayúsculas con espaciado, como en la web */
h2 {
  font-size: clamp(1.25rem, 2.6vw, 1.6rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}

h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
}

p { margin: 0 0 1em; }

.eyebrow {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .8em;
}

.lead { font-size: 1.2rem; font-weight: 500; }
.subtitle { margin-bottom: 2.2em; }
.note { font-size: .95rem; color: var(--heading); margin-top: .9em; }

/* ---------- Cabecera ---------- */
.site-header {
  border-bottom: 1px solid var(--bg-soft);
  padding: 18px 0;
}
.logo { height: 42px; width: auto; }

/* ---------- Botón de descarga ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.2rem;            /* 19,2 px en negrita: supera los 18,66 px de "texto grande" (contraste AA 3:1) */
  line-height: 1.2;
  text-decoration: none;
  padding: .9em 1.6em;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(197, 109, 129, .28);
  transition: background-color .2s ease, transform .2s ease;
}
.btn:hover { background: var(--accent-dark); transform: translateY(-1px); }
.btn { white-space: nowrap; }
.btn:focus-visible { outline: 3px solid var(--heading); outline-offset: 3px; }

.btn-icon {
  width: 1.3em;
  height: 1.3em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Hero ---------- */
.hero {
  background: linear-gradient(180deg, var(--bg-alt) 0%, var(--bg) 100%);
  padding: 64px 0 72px;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 56px;
  align-items: center;
}

/* ---------- Hero de registro ----------
   Escritorio: mockup a la izquierda; titular y formulario a la derecha.
   Móvil: titular -> mockup -> formulario (orden del HTML). */
.hero-registro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "mock text"
    "mock form";
  grid-template-rows: auto 1fr;
  column-gap: 56px;
  align-items: start;
}
.hero-registro .hero-text { grid-area: text; }
.hero-registro .mockup    { grid-area: mock; align-self: center; }
.hero-registro .form-card { grid-area: form; }
.hero-registro .lead { margin-bottom: 1.4em; }

.mockup { margin: 0; }
.mockup img {
  width: 100%;
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(89, 106, 121, .18);
}


/* ---------- Tarjeta del formulario ---------- */
.form-card {
  background: #fff;
  border-radius: 14px;
  border-top: 4px solid var(--accent);
  box-shadow: 0 12px 32px rgba(89, 106, 121, .14);
  padding: 28px 28px 6px;
  scroll-margin-top: 24px;   /* al saltar con el ancla, que no quede pegado arriba */
}
.form-card .form-title {
  text-transform: none;
  letter-spacing: 0;
  font-size: 1.35rem;
  margin-bottom: .35em;
}
.form-intro { font-size: 1rem; margin-bottom: 1.1em; }

/* =========================================================
   Formulario MailerLite: capa de estilos propia
   MailerLite usa selectores con ID y !important, así que para
   ganarles hace falta el mismo ID más una clase (.form-card) e
   !important. Si se regenera el formulario y cambia el número
   (6138929), buscar y reemplazar en este archivo.
   ========================================================= */
.form-card #mlb2-6138929.ml-form-embedContainer { display: block !important; }
.form-card #mlb2-6138929.ml-form-embedContainer .ml-form-align-center { text-align: left; }
.form-card #mlb2-6138929.ml-form-embedContainer .ml-form-embedWrapper {
  display: block !important;
  max-width: none !important;
  width: 100% !important;
  background: transparent !important;
}
.form-card #mlb2-6138929.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody,
.form-card #mlb2-6138929.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody { padding: 0 !important; }

/* Sin floats: todo en flujo normal dentro de la tarjeta */
.form-card #mlb2-6138929.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow,
.form-card #mlb2-6138929.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions,
.form-card #mlb2-6138929.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit { float: none !important; }

/* Etiquetas */
.form-card #mlb2-6138929.ml-form-embedContainer .ml-form-embedWrapper .ml-block-form .ml-field-group label {
  font-family: var(--font-body) !important;
  font-size: .95rem !important;
  font-weight: 700 !important;
  color: var(--heading) !important;
}
.form-card #mlb2-6138929.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow { margin-bottom: 14px !important; }

/* Campos: 16 px como mínimo para que iPhone no haga zoom al tocarlos */
.form-card #mlb2-6138929.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input {
  font-family: var(--font-body) !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
  color: var(--heading) !important;
  border: 1px solid #C9D2D8 !important;
  border-radius: 8px !important;
  padding: 12px 14px !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-card #mlb2-6138929.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input::placeholder { color: #8A99A5 !important; opacity: 1; }
.form-card #mlb2-6138929.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input:focus {
  outline: none;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(197, 109, 129, .22);
}

/* Texto de privacidad */
.form-card #mlb2-6138929.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsContent.privacy-policy p,
.form-card #mlb2-6138929.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsContent p {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: var(--text) !important;
}
.form-card #mlb2-6138929.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsContent.privacy-policy p a,
.form-card #mlb2-6138929.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow label a { color: var(--heading) !important; font-weight: 700; }
.form-card #mlb2-6138929.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsContent { margin-bottom: 12px !important; }
.form-card .rgpd-info { font-size: 12.5px !important; line-height: 1.5 !important; }

/* Casilla de aceptación */
.form-card #mlb2-6138929.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow { margin-bottom: 18px !important; }
.form-card #mlb2-6138929.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow label { cursor: pointer; padding-left: 30px !important; }
.form-card #mlb2-6138929.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow label p {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: var(--text) !important;
}
.form-card #mlb2-6138929.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow .label-description::before,
.form-card #mlb2-6138929.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow .label-description::after {
  width: 18px !important;
  height: 18px !important;
  left: -30px !important;
  top: 1px !important;
}
.form-card #mlb2-6138929.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow .label-description::before { border: 1.5px solid #A9B6BF !important; }
.form-card #mlb2-6138929.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow input[type=checkbox]:checked ~ .label-description::before {
  background-color: var(--accent-dark) !important;
  border-color: var(--accent-dark) !important;
}
/* La casilla real está oculta: sin esto, quien usa teclado no ve dónde está el foco */
.form-card #mlb2-6138929.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow input[type=checkbox]:focus-visible ~ .label-description::before {
  outline: 3px solid rgba(197, 109, 129, .45);
  outline-offset: 2px;
}

/* Botón de envío, igual que el de la landing de descarga */
.form-card #mlb2-6138929.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit { margin-bottom: 22px !important; }
.form-card #mlb2-6138929.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button {
  background-color: var(--accent) !important;
  font-family: var(--font-head) !important;
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  padding: .9em 1em !important;
  border-radius: 999px !important;
  box-shadow: 0 6px 18px rgba(197, 109, 129, .28) !important;
  transition: background-color .2s ease;
}
.form-card #mlb2-6138929.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button:hover { background-color: var(--accent-dark) !important; }
.form-card #mlb2-6138929.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button:focus-visible { outline: 3px solid var(--heading); outline-offset: 3px; }

/* Errores de validación (clase .ml-error que añade el script de MailerLite).
   Rojo oscuro (#B3261E) para que el texto cumpla contraste, y un mensaje
   escrito además del color, porque el color solo no basta. */
.form-card #mlb2-6138929.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-error input { border-color: #B3261E !important; }
.form-card #mlb2-6138929.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-error input:focus { box-shadow: 0 0 0 3px rgba(179, 38, 30, .18); }
.form-card #mlb2-6138929.ml-form-embedContainer .ml-form-embedWrapper .ml-block-form .ml-field-group.ml-error label,
.form-card #mlb2-6138929.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow.ml-error .label-description p { color: #B3261E !important; }
.form-card .ml-field-group.ml-error::after,
.form-card .ml-form-checkboxRow.ml-error::after {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  font-weight: 700;
  color: #B3261E;
}
.form-card .ml-field-name.ml-error::after       { content: "Escribe tu nombre."; }
.form-card .ml-field-email.ml-error::after      { content: "Escribe un email válido."; }
.form-card .ml-form-checkboxRow.ml-error::after { content: "Marca la casilla para continuar."; margin-left: 30px; }

/* Cuando MailerLite oculta el formulario y muestra el "¡Gracias!",
   se ocultan también el título y la intro de la tarjeta para no repetir. */
.form-card:has(.row-form[style*="none"]) .form-title,
.form-card:has(.row-form[style*="none"]) .form-intro { display: none; }

/* Mensaje de éxito */
.form-card #mlb2-6138929.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent { margin-bottom: 22px !important; }
.form-card #mlb2-6138929.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent h4 {
  font-family: var(--font-head) !important;
  font-weight: 700 !important;
  font-size: 1.5rem !important;
  color: var(--accent-dark) !important;
}
.form-card #mlb2-6138929.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent p {
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  line-height: 1.55 !important;
  color: var(--text) !important;
}
.form-card #mlb2-6138929.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent p + p { margin-top: .7em !important; }

/* ---------- Secciones ---------- */
.section { padding: 64px 0; }
.section-alt { background: var(--bg-alt); }

.list-intro { font-weight: 700; color: var(--heading); margin-top: 1.4em; }

.checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 1.4em;
}
.checklist li {
  position: relative;
  padding: .55em 0 .55em 2em;
  border-bottom: 1px solid var(--bg-soft);
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 1.05em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
}

/* Tarjetas de temas */
.topics {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.topic {
  background: #fff;
  border-radius: var(--radius);
  padding: 24px 20px;
  border-bottom: 3px solid var(--teal);
  box-shadow: 0 2px 10px rgba(89, 106, 121, .07);
}
.topic h3 { font-size: .98rem; line-height: 1.4; }

.icon {
  width: 34px;
  height: 34px;
  margin-bottom: 14px;
  fill: none;
  stroke: var(--accent);   /* iconos de un solo color */
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Cierre */
.closing p { font-size: 1.1rem; margin-bottom: 1.6em; }

/* ---------- Pie ---------- */
.site-footer {
  background: var(--heading);
  color: #fff;
  font-size: .9rem;
  padding: 26px 0;
  text-align: center;
}
.site-footer p { margin: 0; }
.site-footer .legal { margin-top: .5em; }
.site-footer a { color: #fff; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .topics { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .hero { padding: 40px 0 52px; }
  .hero-grid { grid-template-columns: 1fr; gap: 40px; text-align: center; }
  .logo { height: 32px; }
  .mockup { max-width: 460px; margin: 0 auto; }
  .hero-registro {
    grid-template-columns: 1fr;
    grid-template-areas: "text" "mock" "form";
    grid-template-rows: auto;
    row-gap: 28px;
    text-align: center;
  }
  .hero-registro .mockup { max-width: 340px; }
  .hero-registro .lead { margin-bottom: 0; }
  .form-card { max-width: 520px; width: 100%; margin: 0 auto; text-align: left; }
  .section { padding: 48px 0; }
  .btn { padding: .85em 1.3em; }
}

@media (max-width: 480px) {
  /* Botón a todo el ancho: el texto cabe en una línea incluso a 320 px */
  .btn { display: flex; width: 100%; justify-content: center; padding: .9em .8em; gap: .45em; }
  .topics { grid-template-columns: 1fr; }
  .topic { display: flex; gap: 14px; align-items: center; padding: 18px; }
  .icon { margin: 0; flex-shrink: 0; }
  .form-card { padding: 22px 18px 4px; }
}

/* Móviles muy estrechos (iPhone SE, 320-374 px): el texto a 19 px no cabe.
   Se reduce y se usa el rosa oscuro, que con blanco da 5:1 y cumple AA
   también como texto normal. */
@media (max-width: 374px) {
  .btn { font-size: 1.05rem; background: var(--accent-dark); }
  .btn-icon { display: none; }
}

@media (max-width: 374px) {
  .form-card #mlb2-6138929.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button {
    font-size: 1.05rem !important;
    background-color: var(--accent-dark) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
  .btn:hover { transform: none; }
}