/* Web de Ismael Segura · maquetación de la web.
   Colores, letras y piezas comunes: estilo-maf.css. Aquí solo lo propio de la web. */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font-size: 18px; line-height: 1.6; background: var(--maf-negro); color: var(--maf-blanco); font-family: var(--maf-texto-fuente); }
img { max-width: 100%; height: auto; }
a { color: var(--maf-oro-claro); text-underline-offset: 3px; }
a:hover { color: #fff; }
:focus-visible { outline: 2px solid var(--maf-oro-claro); outline-offset: 3px; border-radius: 4px; }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.saltar { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--maf-oro-claro); color: var(--maf-negro); padding: 10px 16px; border-radius: 8px; font-weight: 700; text-decoration: none; }
.saltar:focus { top: 12px; }
.contenedor { width: min(1120px, 100% - 48px); margin: 0 auto; }
.estrecho { width: min(760px, 100% - 48px); margin: 0 auto; }
.centrado { text-align: center; }

/* Botón como el de las páginas nuevas */
.maf-boton { border-radius: 6px; font-family: "Oswald", "Arial Narrow", sans-serif; font-weight: 500; letter-spacing: .14em; box-shadow: 0 14px 34px -14px rgba(230, 180, 90, .6), inset 0 1px 0 rgba(255, 255, 255, .55); transition: transform .5s, box-shadow .5s, filter .5s; }
.maf-boton:hover { transform: translateY(-1px); filter: brightness(1.06); }
.maf-boton::after { content: "›"; font-size: 1.3em; line-height: 0; margin-left: 2px; }
.maf-boton-linea::after { content: none; }
/* Pie como el de las páginas nuevas */
.pie-pagina { padding: 40px clamp(20px, 5vw, 72px) 60px; border-top: 1px solid rgba(201, 165, 90, .25); text-align: center; font-size: 13px; color: var(--maf-gris-noche); }
.pie-pagina img { width: 170px; height: auto; margin: 0 auto 12px; display: block; }
.pie-pagina p { max-width: 72ch; margin: 0 auto 8px; }
.pie-pagina a { color: var(--maf-oro); text-decoration: none; }
.pie-pagina a:hover { color: var(--maf-oro-claro); text-decoration: underline; }
.pie-pagina .pie-fino { font-size: 12px; opacity: .8; margin-top: 14px; }
.maf-crema .pie-pagina, .legal .pie-pagina { color: var(--maf-texto-suave); border-color: rgba(154, 118, 46, .35); }
.maf-crema .pie-pagina a { color: var(--maf-oro-crema); }
/* Retrato en blanco y negro como el resto de fotos de la web */
.retrato img, img.retrato { filter: grayscale(1) contrast(1.25); }
/* Tablas legales: pista de que se deslizan */
.legal .tabla, .tabla-scroll { -webkit-mask-image: linear-gradient(to right, #000 92%, transparent 100%); mask-image: linear-gradient(to right, #000 92%, transparent 100%); }
/* Lo que falta por confirmar: se ve a propósito, para que no se publique sin rellenar */
.pendiente { background: #FFE58A; color: #1B1505; padding: 1px 6px; border-radius: 4px; font-family: var(--maf-texto-fuente); font-weight: 700; font-size: .9em; letter-spacing: 0; text-transform: none; }
.caja-pendiente { border: 2px dashed #FFE58A; border-radius: 16px; padding: 22px; text-align: center; color: #FFE58A; }

@font-face { font-family: "Oswald"; src: url("../fonts/oswald-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Oswald"; src: url("../fonts/oswald-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
/* ---------- Cabecera (la misma que las páginas nuevas) ---------- */
.cabecera { position: sticky; top: 0; z-index: 40; background: linear-gradient(to bottom, rgba(5, 3, 1, .96), rgba(5, 3, 1, .86)); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(233, 203, 140, .12); }
.cabecera-fila { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 72px; }
.marca { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--maf-oro); }
.marca img { width: 38px; height: auto; }
.marca span { font-family: var(--maf-titulo); font-weight: 700; letter-spacing: .3em; font-size: 12px; text-transform: uppercase; }
.marca:hover { color: var(--maf-oro-claro); }
.menu { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.menu a { display: block; padding: 10px 12px; font-family: "Oswald", "Arial Narrow", sans-serif; font-weight: 400; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; text-decoration: none; color: var(--maf-gris-noche); border-radius: 6px; transition: color .4s; }
.menu a:hover, .menu a[aria-current="page"] { color: var(--maf-oro-claro); }
.menu .maf-boton { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 16px; font-size: 12px; color: var(--maf-negro); margin-left: 8px; }
.menu .maf-boton:hover { color: var(--maf-negro); }
.abrir-menu { display: none; background: none; border: 1.5px solid var(--maf-oro-linea); color: var(--maf-oro-claro); border-radius: 10px; width: 46px; height: 46px; cursor: pointer; }
.abrir-menu svg { width: 22px; height: 22px; }
@media (max-width: 980px) {
  .abrir-menu { display: inline-grid; place-items: center; }
  .navegacion { position: fixed; inset: 72px 0 auto 0; background: var(--maf-negro); border-bottom: 1px solid rgba(233, 203, 140, .25); padding: 12px 24px 24px; display: none; max-height: calc(100vh - 72px); overflow-y: auto; }
  .navegacion.abierta { display: block; }
  .menu { flex-direction: column; align-items: stretch; }
  .menu a { padding: 14px 6px; font-size: 15px; border-bottom: 1px solid rgba(233, 203, 140, .12); }
  .menu .maf-boton { margin: 16px 0 0; min-height: 50px; font-size: 13px; justify-content: center; }
}

/* ---------- Secciones ---------- */
.seccion { padding: 72px 0; position: relative; }
.seccion-titulo { font-size: clamp(30px, 4.6vw, 52px); margin-bottom: 14px; }
.entradilla { font-size: 1.15em; max-width: 680px; }
.centrado .entradilla { margin-left: auto; margin-right: auto; }
.cita-grande { font-family: var(--maf-titulo); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; font-size: clamp(22px, 3.2vw, 34px); line-height: 1.2; color: var(--maf-oro-claro); }
.nota { font-size: 15px; color: var(--maf-gris-noche); }

/* Portada */
.portada { padding: 40px 0 24px; overflow: hidden; }
.portada-rejilla { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 24px; align-items: center; }
.portada-texto { position: relative; z-index: 2; }
.portada .maf-escudo { max-width: 170px; margin: 0 0 8px; }
.portada h1 { font-size: clamp(44px, 7vw, 88px); }
.portada .maf-versalitas { color: var(--maf-blanco); margin: 10px 0 0; }
.portada .entradilla { margin: 22px 0; }
.portada-cita { font-style: italic; color: var(--maf-oro-claro); margin: 0 0 26px; }
.portada-luz { margin: -40px -40px -40px 0; }
.portada-luz .maf-luz { width: 100%; }
.debajo-boton { display: block; margin-top: 10px; font-size: 14px; color: var(--maf-gris-noche); }

/* Listas de dolor, ventajas, pasos */
.rejilla-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.rejilla-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.rejilla-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.pilar { text-align: center; padding: 24px 18px; }
.pilar .maf-icono { width: 72px; height: 72px; margin-bottom: 14px; }
.pilar h3 { font-family: var(--maf-titulo); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--maf-oro); margin: 0 0 8px; font-size: 1.05em; }
.pilar p { margin: 0; }
.tarjeta-oferta { display: flex; flex-direction: column; gap: 10px; }
.tarjeta-oferta h3 { font-family: var(--maf-titulo); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--maf-oro); margin: 0; font-size: 1.25em; }
.tarjeta-oferta p { margin: 0; }
.tarjeta-oferta .enlace-flecha { margin-top: auto; padding-top: 8px; font-weight: 700; }
.etiqueta { display: inline-block; font-family: var(--maf-titulo); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--maf-negro); background: var(--maf-oro-claro); border-radius: 999px; padding: 3px 10px; align-self: flex-start; }
.etiqueta-suave { background: transparent; color: var(--maf-oro-claro); box-shadow: inset 0 0 0 1px var(--maf-oro-linea); }
.pasos { list-style: none; padding: 0; margin: 0; display: grid; gap: 22px; }
.paso { display: flex; gap: 18px; align-items: flex-start; }
.paso .maf-numero { width: 44px; height: 44px; font-size: 18px; color: var(--maf-negro); background: var(--maf-oro-claro); }
.paso h3 { margin: 4px 0 4px; font-family: var(--maf-titulo); text-transform: uppercase; letter-spacing: .04em; color: var(--maf-oro); font-size: 1.05em; }
.paso p { margin: 0; }
.si-no { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.si-no h3 { font-family: var(--maf-titulo); text-transform: uppercase; letter-spacing: .05em; margin: 0 0 10px; color: var(--maf-oro); }
.lista-no { list-style: none; padding: 0; margin: 0; }
.lista-no li { position: relative; padding-left: 28px; margin: 6px 0; }
.lista-no li::before { content: "—"; position: absolute; left: 0; color: var(--maf-gris-noche); }

/* Imagen con continuidad en páginas interiores */
.con-luz { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.con-luz .maf-luz-marco { margin-top: -120px; margin-right: -24px; }
.retrato { border-radius: 18px; display: block; width: 100%; max-width: 420px; box-shadow: 0 0 0 1.5px var(--maf-oro-linea), 0 30px 80px rgba(224, 160, 64, .12); }
.cabecera-pagina { padding: 56px 0 24px; overflow-x: clip; }
.cabecera-pagina h1 { font-size: clamp(38px, 6vw, 72px); }

/* Preguntas frecuentes */
.faq details { border-bottom: 1px solid rgba(233, 203, 140, .25); padding: 4px 0; }
.faq summary { cursor: pointer; list-style: none; padding: 16px 36px 16px 0; position: relative; font-weight: 700; font-size: 1.05em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 12px; font-size: 26px; color: var(--maf-oro); line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 0 0 18px; color: var(--maf-blanco); }

/* Formulario de la lista de aviso */
.formulario { display: grid; gap: 14px; max-width: 520px; margin: 0 auto; text-align: left; }
.formulario label.campo { display: grid; gap: 6px; font-weight: 700; font-size: 15px; }
.formulario input[type="text"], .formulario input[type="email"] { font: inherit; font-weight: 400; padding: 13px 14px; border-radius: 10px; border: 1.5px solid var(--maf-oro-linea); background: #0F0C08; color: var(--maf-blanco); }
.formulario .casilla { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; }
.formulario .casilla input { width: 20px; height: 20px; margin-top: 3px; accent-color: #E6B45A; flex: none; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.capa-info { font-size: 13px; color: var(--maf-gris-noche); line-height: 1.5; }

/* Libro */
.libro-rejilla { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 48px; align-items: center; }
.libro-portada { border-radius: 8px; box-shadow: 0 30px 80px rgba(224, 160, 64, .18); }

/* Artículo */
.articulo { font-size: 19px; }
.articulo h2 { font-family: var(--maf-titulo); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--maf-oro); font-size: 1.25em; margin: 1.8em 0 .5em; }
.articulo blockquote { margin: 1.4em 0; padding: 4px 0 4px 20px; border-left: 2px solid var(--maf-oro); font-style: italic; color: var(--maf-oro-claro); }
.firma { color: var(--maf-gris-noche); font-size: 15px; }

/* Páginas legales: crema para leer */
.legal { background: var(--maf-crema); color: var(--maf-texto); padding: 56px 0 72px; }
.legal h1 { font-family: var(--maf-titulo); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; font-size: clamp(30px, 4.6vw, 44px); line-height: 1.1; margin: 0 0 8px; color: var(--maf-texto); }
.legal h2 { font-family: var(--maf-texto-fuente); font-weight: 700; font-size: 1.2em; margin: 2em 0 .5em; color: var(--maf-texto); }
.legal a { color: var(--maf-oro-crema); }
.legal table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 1em 0; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 10px 8px; border-bottom: 1px solid var(--maf-linea-crema); }
.legal th { font-weight: 700; }
.legal .actualizado { color: var(--maf-texto-suave); font-size: 15px; }
.legal .recuadro-legal { border: 1.5px solid var(--maf-oro-plano); border-radius: 12px; padding: 16px 20px; background: #FBF8F1; }

/* ---------- Pie ---------- */
.pie { border-top: 1px solid rgba(233, 203, 140, .2); padding: 56px 0 96px; font-size: 15px; }
.pie-rejilla { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 32px; }
.pie h2 { font-family: var(--maf-titulo); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--maf-oro); margin: 0 0 12px; }
.pie ul { list-style: none; padding: 0; margin: 0; }
.pie li { margin: 6px 0; }
.pie a { color: var(--maf-blanco); text-decoration: none; }
.pie a:hover { color: var(--maf-oro-claro); text-decoration: underline; }
.pie .maf-escudo { max-width: 110px; margin-bottom: 8px; }
.pie-legal { margin-top: 36px; padding-top: 20px; border-top: 1px solid rgba(233, 203, 140, .15); color: var(--maf-gris-noche); font-size: 13.5px; }
.pie-legal p { margin: 6px 0; }

/* Botón de WhatsApp siempre visible */
.whatsapp { position: fixed; right: 18px; bottom: 18px; z-index: 45; display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 18px 0 14px; border-radius: 999px; background: var(--maf-degradado); color: var(--maf-negro); font-weight: 700; text-decoration: none; box-shadow: 0 8px 30px rgba(0, 0, 0, .5); }
.whatsapp:hover { color: var(--maf-negro); filter: brightness(1.06); }
.whatsapp svg { width: 26px; height: 26px; }

/* ---------- Móvil ---------- */
@media (max-width: 900px) {
  .portada-rejilla, .con-luz, .libro-rejilla, .si-no { grid-template-columns: 1fr; }
  .portada-luz { order: -1; margin: -40px -24px -90px; }
  .portada:not(:has(.maf-escudo)) .portada-luz { margin-bottom: -24px; }
  .portada .maf-escudo { margin: 0 auto 6px; }
  .portada-texto { text-align: center; }
  .rejilla-3, .rejilla-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .con-luz .maf-luz-marco { margin: -20px auto 0; max-width: 260px; }
  .pie-rejilla { grid-template-columns: 1fr 1fr; }
  .libro-rejilla { gap: 24px; }
  .libro-rejilla img { max-width: 300px; margin: 0 auto; display: block; }
}
@media (max-width: 600px) {
  body { font-size: 17px; }
  .contenedor, .estrecho { width: calc(100% - 32px); }
  .seccion { padding: 52px 0; }
  .rejilla-2, .rejilla-3, .rejilla-4, .pie-rejilla { grid-template-columns: 1fr; }
  .whatsapp span { display: none; }
  .whatsapp { padding: 0 13px; }
  .marca span { font-size: 15px; }
}

/* Puntos de paso del hilo y cierre */
.paso-ofertas { left: 8px; top: 24px; }
.cierre-boton { margin: 30px 0 0; }
.seccion .maf-pregunta { margin-top: 8px; }
@media (max-width: 600px) { .paso-ofertas { left: 2px; } }
.paso-historia { left: 8px; top: 30px; }
.paso-cierre-ismael { left: 8px; top: 10px; }
.h-fila { font-family: var(--maf-titulo); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--maf-oro); margin: 0; font-size: 1em; }
.maf-fila p { margin: 2px 0 0; }
.columna-ideas { display: grid; gap: 20px; align-content: start; }
figure { margin: 0; }
@media (max-width: 600px) { .paso-historia, .paso-cierre-ismael { left: 2px; } }
.caja-error { border: 1.5px solid #E0806E; color: #FFD9CF; background: #2A120D; border-radius: 12px; padding: 12px 16px; max-width: 520px; margin: 0 auto 16px; }
/* La imagen principal tiene fondo iluminado: se funde con un óvalo, sin bordes rectos */
.maf-luz.maf-luz-ovalo {
  -webkit-mask-image: radial-gradient(ellipse 46% 52% at 52% 48%, #000 52%, transparent 100%);
  mask-image: radial-gradient(ellipse 46% 52% at 52% 48%, #000 52%, transparent 100%);
  -webkit-mask-composite: source-over; mask-composite: add; }
.paso-derecha { right: 10px; top: 20px; }
.paso-izquierda { left: 10px; top: 20px; }
.menu .maf-boton { white-space: nowrap; letter-spacing: .05em; }
@media (max-width: 600px) { .paso-derecha { right: 3px; } .paso-izquierda { left: 3px; } }

/* Móvil: el escudo se funde con la imagen y el hilo baja por el margen sin cruzar el texto */
.paso-movil { display: none; }
@media (max-width: 900px) {
  .portada-texto { z-index: auto; }
  .portada .maf-escudo { position: static; }
  .paso-movil { display: block; right: -13px; top: 0; }
}
.legal .tabla { overflow-x: auto; margin: 1em 0; }
.legal .tabla table { margin: 0; min-width: 640px; }
.legal .tabla:focus-visible { outline: 2px solid var(--maf-oro-claro, #F8D890); outline-offset: 2px; }
.legal .tabla td:first-child, .legal .tabla th:first-child { min-width: 120px; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--maf-oro); }
html { scroll-padding-top: 88px; }
.planos-columna { position: relative; }
@media (max-width: 900px) { .paso-planos { left: -19px; right: auto; top: -18px; } }
@media (max-width: 900px) {
  .portada:not(:has(.maf-escudo)) .portada-luz .maf-luz { width: auto; max-width: 100%; max-height: 58vh; margin: 0 auto; }
  .portada:not(:has(.maf-escudo)) .portada-luz::before { display: none; }
  .portada:not(:has(.maf-escudo)) .portada-luz .maf-luz { -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%); }
}
/* Móvil: los pilares van en una columna, de Energía a Mentalidad (el orden del hilo y del texto:
   primero el descanso), con el icono a la derecha para que el hilo baje por el margen sin cruzar el texto */
@media (max-width: 900px) {
  [data-seccion="pilares"] .rejilla-4 { display: flex; flex-direction: column-reverse; gap: 0; max-width: 560px; margin: 0 auto; }
  [data-seccion="pilares"] .pilar { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "titulo icono" "texto icono"; column-gap: 16px; align-items: center; text-align: left; padding: 16px 0; border-bottom: 1px solid rgba(233, 203, 140, .12); }
  [data-seccion="pilares"] .pilar .maf-icono { grid-area: icono; width: 60px; height: 60px; margin: 0; }
  [data-seccion="pilares"] .pilar h3 { grid-area: titulo; align-self: end; }
  [data-seccion="pilares"] .pilar p { grid-area: texto; align-self: start; }
}
@media (max-width: 900px) {
  [data-seccion="pilares"] .rejilla-4 { position: relative; }
  .paso-pilares { right: -13px; top: -14px; }
  .nota-pasos { padding-left: 50px; }
}
.pasos-marco { position: relative; }
@media (max-width: 900px) { .paso-pasos { left: -14px; right: auto; top: -10px; } }