/* Superficies de contenido: el hero tramado (publico.css) y debajo la misma
 * gramática de la portada: rótulos mono, filetes, planes unidos, preguntas con
 * +/− y un cierre sobre el campo. Sin JavaScript: el campo es estático. */
.paginas-shell { --titulo-articulo: clamp(24px, 2.2vw, 32px); max-width: 1560px; margin: auto; padding: 64px 5% 80px; }
.paginas-shell > .paginas-articulo { max-width: 1404px; margin: auto; }
.paginas-articulo h2 { color: var(--ink); font-size: var(--titulo-articulo); font-weight: 500; line-height: 1.12; letter-spacing: -.03em; margin: 0 0 20px; text-wrap: balance; }
.paginas-articulo h3 { font-size: var(--titulo-bloque); font-weight: 550; line-height: 1.4; letter-spacing: -.025em; margin: 0 0 10px; }
.paginas-articulo p { margin-top: 0; }
.paginas-articulo .public-eyebrow { margin-bottom: 24px; }

.boton, .plan-cta { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 50px; padding: 15px 22px; border: 1px solid var(--ink); border-radius: 32px; background: var(--ink); color: var(--public-paper); font-size: 13px; font-weight: 500; text-decoration: none; cursor: pointer; transition: transform .2s, background-color .2s; }
.boton:hover { background: var(--ink-hover); color: var(--public-paper); transform: translateY(-2px); }
.boton span, .public-enlace span { font-size: 19px; font-weight: 400; line-height: 1; }
.public-enlace { display: inline-flex; align-items: center; gap: 20px; min-height: 44px; color: inherit; font-size: 13px; text-decoration: none; border-bottom: 1px solid currentColor; }
.public-enlace:hover { color: var(--authority); }
.public-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 26px; }

/* Planes: una sola pieza con filetes, el plan con expedientes en tinta. */
.planes-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid #c1c5c7; }
.plan-card { display: flex; flex-direction: column; min-width: 0; padding: 0 28px 30px; background: #fcfbf7; border-right: 1px solid #c1c5c7; }
.plan-card:last-child { border-right: 0; }
.plan-barra { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; margin: 0 -28px 26px; padding: 12px 28px; border-bottom: 1px solid #dadddc; color: var(--muted); font: 10px/1.5 var(--public-mono); letter-spacing: .04em; text-transform: uppercase; }
.plan-sello { padding: 4px 6px; border: 1px solid currentColor; font-size: 9px; white-space: nowrap; }
.paginas-articulo .plan-card h2 { margin-bottom: 8px; font-size: var(--titulo-bloque); letter-spacing: -.02em; }
.plan-precio { margin: 18px 0 0; font-size: clamp(28px, 2.4vw, 34px); font-weight: 500; line-height: 1.1; letter-spacing: -.04em; }
.plan-precio small { font-size: 14px; letter-spacing: 0; color: var(--muted); }
.plan-precio span { display: block; margin-top: 8px; font: 11px/1.5 var(--font-ui); letter-spacing: 0; color: var(--muted); }
.plan-condicion { min-height: 38px; margin: 6px 0 22px; font-size: 12px; color: var(--muted); }
.plan-cta { min-height: 46px; padding: 10px 14px; border-color: #8a9098; border-radius: 0; background: transparent; color: var(--ink); font-size: 12px; }
.plan-cta::after { content: "↗"; font-size: 19px; line-height: 1; }
.plan-cta:hover { background: #e5dfd0; color: var(--ink); }
.plan-card ul { list-style: none; padding: 0; margin: 24px 0 0; }
.plan-card li { padding: 12px 0; border-bottom: 1px solid #dadddc; font-size: 12.5px; line-height: 1.55; }
.plan-card li:last-child { border-bottom: 0; }
.plan-card li strong { font-weight: 550; color: var(--authority); }
.plan-destacado { background: var(--ink); color: var(--public-paper); }
.plan-destacado h2 { color: var(--public-paper); }
.plan-destacado :is(.plan-barra, .plan-precio small, .plan-precio span, .plan-condicion) { color: #bdc7d2; }
.plan-destacado .plan-barra, .plan-destacado li { border-color: #ffffff27; }
.plan-destacado li strong { color: var(--authority-on-dark); }
.plan-destacado .plan-cta { border-color: var(--public-paper); background: var(--public-paper); color: var(--ink); }
.plan-destacado .plan-cta:hover { background: #e9e3d5; }
.plan-destacado :focus-visible { outline-color: var(--authority-on-dark); }
.cuenta-enlace { margin: 22px 0 0; font-size: 13px; color: var(--muted); }

/* Texto corrido y avisos. */
.seccion-texto { max-width: 780px; margin: 72px 0 0; }
.seccion-texto h2:not(:first-child):not(.public-eyebrow + h2) { margin-top: 40px; }
.seccion-texto p:not(.public-eyebrow), .pasos li { font-size: 16px; line-height: 1.7; }
.aviso { margin: 0 0 32px; padding: 22px 24px; background: var(--public-warm-white); border: 1px solid var(--public-hairline); border-left: 3px solid var(--authority); }
.aviso p:last-child { margin-bottom: 0; }

/* Cifras y colecciones. */
.cifras-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid var(--public-hairline); }
.cifras-grid > div { padding: 24px 24px 24px 0; }
.cifras-grid > div + div { padding-left: 24px; border-left: 1px solid var(--public-hairline); }
.cifras-grid strong, .cifras-grid span { display: block; }
.cifras-grid strong { font-size: clamp(26px, 2.4vw, 34px); font-weight: 500; line-height: 1.1; letter-spacing: -.035em; color: var(--ink); }
.cifras-grid span { margin-top: 10px; color: var(--muted); font: 10px/1.6 var(--public-mono); letter-spacing: .04em; text-transform: uppercase; }
.fuentes-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; padding: 0; margin: 40px 0 0; border-top: 1px solid #b2b2a9; border-left: 1px solid #b2b2a9; }
.fuentes-grid li { padding: 24px 22px; border-right: 1px solid #b2b2a9; border-bottom: 1px solid #b2b2a9; background: #fcfbf7; }
.fuentes-grid p { font-size: 14px; margin-bottom: 14px; color: var(--muted); }
.materias-destacadas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; list-style: none; padding: 0; margin: 28px 0; border-top: 1px solid var(--public-hairline); }
.materias-destacadas li { padding: 10px 0; border-bottom: 1px solid var(--public-hairline); font-size: 15px; line-height: 1.5; }
.materias-destacadas span { display: block; color: var(--muted); font: 11px/1.6 var(--public-mono); }
.fuentes-grid span { color: var(--authority); font: 10px/1.6 var(--public-mono); letter-spacing: .04em; text-transform: uppercase; }
.pasos { list-style: none; counter-reset: paso; padding: 0; border-top: 1px solid var(--public-hairline); }
.pasos li { counter-increment: paso; position: relative; padding: 22px 0 22px 56px; margin: 0; border-bottom: 1px solid var(--public-hairline); }
.pasos li::before { content: "0" counter(paso); position: absolute; left: 0; top: 22px; color: var(--authority); font: 11px/2.6 var(--public-mono); }

/* Preguntas: filetes y +/− como en la portada. */
.seccion-faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 9%; margin-top: 72px; }
.seccion-faq > div:first-child p:not(.public-eyebrow) { color: var(--muted); font-size: 14px; }
.faq-lista { max-width: 960px; }
.paginas-articulo details { border-top: 1px solid var(--public-hairline); }
.paginas-articulo details:last-of-type { border-bottom: 1px solid var(--public-hairline); }
.paginas-articulo summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; list-style: none; cursor: pointer; padding: 18px 0; font-size: 15px; font-weight: 500; letter-spacing: -.01em; }
.paginas-articulo summary::-webkit-details-marker { display: none; }
.paginas-articulo summary::after { content: "+"; flex-shrink: 0; font: 19px var(--public-mono); }
.paginas-articulo details[open] summary::after { content: "−"; }
.paginas-articulo details p { max-width: 780px; padding: 0 30px 18px 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.siguiente-paso { max-width: 960px; margin: 40px 0 0; color: var(--muted); font-size: 14px; line-height: 1.75; }

/* Contacto. */
.contacto-grid { display: grid; grid-template-columns: minmax(0, 600px) minmax(0, 400px); gap: 9%; }
.contacto-form { display: flex; flex-direction: column; gap: 10px; }
.contacto-form label { font-size: 13px; font-weight: 550; }
.contacto-form label:not(:first-child) { margin-top: 16px; }
.contacto-form label span, .nota-formulario { color: var(--muted); font-size: 12px; font-weight: 400; line-height: 1.7; }
.contacto-form input, .contacto-form textarea { width: 100%; padding: 14px; border: 1px solid #98a1ab; background: var(--public-warm-white); color: var(--text); font: inherit; border-radius: 0; }
.contacto-form textarea { resize: vertical; }
.contacto-form input:focus, .contacto-form textarea:focus { border-color: var(--ink); }
.contacto-form textarea::placeholder { color: var(--muted); }
.contacto-form .boton { align-self: flex-start; margin-top: 8px; }
.campo-trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contacto-contexto { align-self: start; padding: 30px; background: var(--ink); color: #c9d0d8; }
.paginas-articulo .contacto-contexto h2 { color: var(--public-paper); font-size: var(--titulo-bloque); }
.contacto-contexto p { line-height: 1.7; }
.contacto-contexto a { color: var(--public-paper); }
.contacto-contexto a:hover { color: var(--authority-on-dark); }
.contacto-contexto :focus-visible { outline-color: var(--authority-on-dark); }
.error-formulario { color: var(--danger); background: var(--danger-soft); padding: 16px; }

/* Cierre sobre el campo estático, el mismo de la portada. */
.public-cierre { position: relative; isolation: isolate; overflow: hidden; padding: 72px 5%; background: var(--ink) url('/static/brand/campo-estatico.svg') center / cover no-repeat; color: var(--public-paper); }
.public-cierre::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: linear-gradient(90deg, #0d1421f5 0, #0d1421e0 35%, #0d142199 70%, #0d142166); }
.public-cierre-inner { display: grid; grid-template-columns: 1.1fr 1fr; gap: 10%; align-items: center; max-width: 1404px; margin: auto; }
.public-cierre .public-eyebrow { color: #c1cbd3; margin-bottom: 24px; }
.public-cierre h2 { margin: 0; font-size: var(--titulo-cierre); font-weight: 500; line-height: 1.1; letter-spacing: -.03em; }
.public-cierre h2 em { font-style: normal; color: var(--authority-on-dark); }
.public-cierre-inner > div > p:last-child { max-width: 400px; margin: 26px 0 0; color: #d1d7de; font-size: 14px; }
.public-cierre-panel { padding: 30px; border: 1px solid #f4f2eb28; background: #0d1421d9; }
.public-cierre-panel p { margin: 22px 0 0; color: #c9d0d8; font-size: 13px; }
.public-cierre a { color: inherit; }
.public-cierre a:hover { color: var(--authority-on-dark); }
.public-cierre .boton { border-color: var(--public-paper); background: var(--public-paper); color: var(--ink); }
.public-cierre .boton:hover { border-color: #e1c587; background: #e1c587; color: var(--ink); }
.public-cierre :focus-visible { outline-color: var(--authority-on-dark); }

@media (max-width: 1100px) {
  .planes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan-card:nth-child(2) { border-right: 0; }
  .plan-card:nth-child(-n+2) { border-bottom: 1px solid #c1c5c7; }
  .contacto-grid, .seccion-faq { gap: 40px; }
}
@media (max-width: 760px) {
  .seccion-faq, .public-cierre-inner { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .fuentes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contacto-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .materias-destacadas { grid-template-columns: minmax(0, 1fr); }
  .paginas-shell { padding: 44px 20px 52px; }
  .planes-grid, .fuentes-grid { grid-template-columns: minmax(0, 1fr); }
  .plan-card { border-right: 0; border-bottom: 1px solid #c1c5c7; }
  .plan-card:last-child { border-bottom: 0; }
  .plan-condicion { min-height: 0; }
  .plan-card li { font-size: 14px; }
  .cifras-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cifras-grid > div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .cifras-grid > div:nth-child(n+3) { border-top: 1px solid var(--public-hairline); }
  .seccion-texto, .seccion-faq { margin-top: 48px; }
  .contacto-contexto { padding: 24px 20px; }
  .contacto-contexto a { overflow-wrap: anywhere; }
  .public-cierre { padding: 48px 20px; }
  .public-cierre-panel { padding: 22px 20px; }
}
@media print {
  .public-cierre { display: none; }
}
