/* luisgs.com — dirección "Presupuesto"
   Papel frío, tinta de calco y hojas que se apilan como un presupuesto con copia. */

@font-face {
  font-family: "Schibsted Grotesk";
  src: url("/assets/fonts/schibsted-grotesk.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Serif 4";
  src: url("/assets/fonts/source-serif-4.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --papel: #eef0ec;
  --hoja: #fcfcfa;
  --calco: #dcdfea;
  --tinta: #23285c;
  --tinta-hover: #343b80;
  --texto: #1a1c22;
  --texto-suave: #4a4f5c;
  --linea: #c9cdd6;
  --sobre-tinta: #f4f5fa;
  --sobre-tinta-suave: #bfc3dd;

  --grotesca: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;

  --margen: 1rem;
  --ancho: 68rem;
  --radio: 4px;

  color-scheme: light;
}

/* Base */

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

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

body {
  margin: 0;
  background: var(--papel);
  color: var(--texto);
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.62;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--grotesca);
  color: var(--texto);
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--tinta);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 3px solid var(--tinta);
  outline-offset: 3px;
}

.saltar {
  position: absolute;
  left: var(--margen);
  top: -4rem;
  z-index: 10;
  padding: 0.6rem 1rem;
  background: var(--tinta);
  color: var(--sobre-tinta);
  font-family: var(--grotesca);
  font-weight: 600;
  border-radius: var(--radio);
}

.saltar:focus {
  top: 0.75rem;
}

.envoltura {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--margen);
}

/* Cabecera */

.cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.1rem;
  font-family: var(--grotesca);
}

.marca {
  color: var(--texto);
  font-weight: 800;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.cabecera-enlace {
  font-weight: 600;
  font-size: 0.9375rem;
}

/* Botones */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0.85rem 1.4rem;
  border: 1.5px solid var(--tinta);
  border-radius: var(--radio);
  font-family: var(--grotesca);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.boton-principal {
  background: var(--tinta);
  color: var(--sobre-tinta);
}

.boton-principal:hover {
  background: var(--tinta-hover);
  border-color: var(--tinta-hover);
}

.boton-secundario {
  background: transparent;
  color: var(--tinta);
}

.boton-secundario:hover {
  background: var(--hoja);
}

/* Botón claro, para usar sobre fondo de tinta */
.boton-claro {
  background: var(--sobre-tinta);
  border-color: var(--sobre-tinta);
  color: var(--tinta);
}

.boton-claro:hover {
  background: #ffffff;
  border-color: #ffffff;
}

.boton:active {
  transform: translateY(1px);
}

.acciones {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Hoja: el soporte de papel con su copia de calco debajo */

.hoja {
  position: relative;
  background: var(--hoja);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
}

.hoja::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--calco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  transform: translate(6px, 7px) rotate(0.6deg);
}

.hoja-contenido {
  position: relative;
  isolation: isolate;
}

/* Secciones */

.seccion {
  padding-block: 3.5rem;
}

.seccion-titulo {
  font-size: clamp(1.75rem, 6.5vw, 2.6rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.025em;
}

/* Hero */

.hero {
  padding-block: 2.25rem 3rem;
}

.hero h1 {
  max-width: 17ch;
  font-size: clamp(2.35rem, 10.4vw, 5rem);
  font-weight: 850;
  line-height: 1.01;
  letter-spacing: -0.035em;
}

.hero-sub {
  max-width: 36rem;
  margin-top: 1.4rem;
  font-size: 1.1875rem;
  line-height: 1.55;
  color: var(--texto-suave);
}

.hero .acciones {
  margin-top: 2rem;
}

/* Servicios como presupuesto */

.servicios {
  padding-block: 1rem 3.5rem;
  isolation: isolate;
}

.presupuesto-cabecera {
  display: grid;
  gap: 1.25rem;
  padding: 1.5rem 1.25rem 1.25rem;
  border-bottom: 2px solid var(--tinta);
}

.presupuesto-cabecera h2 {
  font-size: clamp(1.6rem, 6vw, 2.25rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.025em;
}

.presupuesto-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.75rem;
  margin: 0;
  font-family: var(--grotesca);
  font-size: 0.9375rem;
}

.presupuesto-meta div {
  display: flex;
  gap: 0.45rem;
}

.presupuesto-meta dt {
  color: var(--tinta);
  font-weight: 700;
}

.presupuesto-meta dt::after {
  content: ":";
}

.presupuesto-meta dd {
  margin: 0;
  color: var(--texto-suave);
}

.presupuesto-columnas {
  display: none;
}

.conceptos {
  margin: 0;
  padding: 0;
  list-style: none;
}

.concepto {
  display: grid;
  gap: 0.4rem;
  padding: 1.35rem 1.25rem;
  border-bottom: 1px dashed var(--linea);
}

.concepto h3 {
  font-size: 1.3125rem;
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: -0.012em;
}

.concepto p {
  color: var(--texto-suave);
}

.presupuesto-pie {
  padding: 1.15rem 1.25rem 1.35rem;
  font-family: var(--grotesca);
  font-size: 1rem;
  font-weight: 600;
}

/* Guía destacada */

.guia-destacada {
  padding-block: 1.5rem 3.5rem;
}

.guia-bloque {
  display: grid;
  gap: 2rem;
  padding: 2rem 1.25rem 2.25rem;
  background: var(--tinta);
  color: var(--sobre-tinta);
  border-radius: var(--radio);
}

.guia-bloque h2 {
  color: var(--sobre-tinta);
  font-size: clamp(1.9rem, 7.6vw, 2.9rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.03em;
}

.guia-bloque p {
  margin-top: 1rem;
  color: var(--sobre-tinta-suave);
}

.guia-bloque .boton {
  width: 100%;
  margin-top: 1.75rem;
}

.guia-bloque a:focus-visible {
  outline-color: var(--sobre-tinta);
}

.portada {
  width: min(15rem, 58%);
  margin: 0 auto;
  transform: rotate(-2deg);
  box-shadow: 8px 10px 0 rgba(0, 0, 0, 0.22);
  border-radius: 2px;
}

/* Sobre mí */

.sobre-mi-rejilla {
  display: grid;
  gap: 2rem;
}

.foto {
  margin: 0;
  width: min(13rem, 46%);
}

.foto img,
.foto-hueco {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radio);
  border: 1px solid var(--linea);
}

.foto-hueco {
  display: grid;
  place-items: center;
  background: var(--hoja);
  color: var(--tinta);
  font-family: var(--grotesca);
  font-size: 3.5rem;
  font-weight: 850;
  letter-spacing: -0.04em;
}

.sobre-mi-texto p {
  max-width: 36rem;
  margin-top: 1.25rem;
  font-size: 1.1875rem;
}

/* Cierre */

.cierre {
  padding-block: 1rem 4rem;
  isolation: isolate;
}

.cierre .hoja-contenido {
  padding: 2rem 1.25rem 2.25rem;
}

.cierre h2 {
  max-width: 20ch;
  font-size: clamp(1.85rem, 7.4vw, 3rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.cierre p {
  max-width: 34rem;
  margin-top: 1rem;
  font-size: 1.1875rem;
  color: var(--texto-suave);
}

.cierre .boton {
  margin-top: 1.75rem;
  width: 100%;
  overflow-wrap: anywhere;
}

/* Pie */

.pie {
  padding-block: 2.25rem 2.75rem;
  border-top: 1px solid var(--linea);
  font-family: var(--grotesca);
  font-size: 0.9375rem;
}

.pie-enlaces {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pie-enlaces a {
  display: inline-block;
  padding-block: 0.35rem;
  font-weight: 600;
}

.pie-firma {
  margin-top: 1.25rem;
  color: var(--texto-suave);
}

/* Landing de la guía */

.landing {
  display: grid;
  gap: 2.5rem;
  padding-block: 1.5rem 4rem;
  grid-template-areas:
    "intro"
    "form"
    "portada"
    "incluye";
}

.landing-intro {
  grid-area: intro;
}

.landing-intro h1 {
  max-width: 16ch;
  font-size: clamp(2.3rem, 10vw, 4.4rem);
  font-weight: 850;
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.landing-intro p {
  max-width: 34rem;
  margin-top: 1.25rem;
  font-size: 1.1875rem;
  color: var(--texto-suave);
}

.landing-portada {
  grid-area: portada;
  margin: 0;
}

.landing-portada .portada {
  width: min(17rem, 70%);
  box-shadow: 8px 10px 0 var(--calco), 8px 10px 0 1px var(--linea);
}

.landing-incluye {
  grid-area: incluye;
}

.landing-incluye h2 {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.beneficios {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--tinta);
}

.beneficios li {
  padding: 1.1rem 0;
  border-bottom: 1px dashed var(--linea);
}

.beneficios h3 {
  font-size: 1.1875rem;
  font-weight: 750;
  line-height: 1.25;
}

.beneficios p {
  margin-top: 0.3rem;
  color: var(--texto-suave);
}

.landing-form {
  grid-area: form;
  isolation: isolate;
  scroll-margin-top: 1rem;
}

.landing-form .hoja-contenido {
  padding: 1.5rem 1.25rem 1.5rem;
}

/* Formulario de MailerLite (embebido en /guia-resenas).
   Sus estilos usan selectores con ID y !important. Para ganarles, estas reglas parten de
   #formulario-mailerlite + .ml-subscribe-form.ml-form-embedContainer (más específicas que las suyas)
   y llevan !important donde ellos también lo usan. */

#formulario-mailerlite {
  margin-top: 1.25rem;
}

#formulario-mailerlite .ml-subscribe-form.ml-form-embedContainer {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
}

#formulario-mailerlite .ml-subscribe-form.ml-form-embedContainer .ml-form-align-center {
  text-align: left !important;
}

#formulario-mailerlite .ml-subscribe-form.ml-form-embedContainer .ml-form-embedWrapper,
#formulario-mailerlite .ml-subscribe-form.ml-form-embedContainer .ml-form-embedWrapper.embedForm {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
}

#formulario-mailerlite .ml-subscribe-form.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody,
#formulario-mailerlite .ml-subscribe-form.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody {
  padding: 0 !important;
}

/* Título y texto de MailerLite: hacen de encabezado de la tarjeta */
#formulario-mailerlite .ml-subscribe-form.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent {
  margin: 0 0 1.25rem !important;
}

#formulario-mailerlite .ml-subscribe-form.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent h4 {
  margin: 0 !important;
  color: var(--texto) !important;
  font-family: var(--grotesca) !important;
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
}

#formulario-mailerlite .ml-subscribe-form.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent p {
  margin: 0.4rem 0 0 !important;
  color: var(--texto-suave) !important;
  font-family: var(--serif) !important;
  font-size: 1.125rem !important;
  line-height: 1.55 !important;
}

#formulario-mailerlite .ml-subscribe-form.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-formContent {
  margin: 0 0 1.25rem !important;
}

/* Campo de email */
#formulario-mailerlite .ml-subscribe-form.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input {
  width: 100% !important;
  height: auto !important;
  min-height: 3.25rem !important;
  padding: 0.85rem 1rem !important;
  background: #ffffff !important;
  border: 1.5px solid var(--linea) !important;
  border-radius: var(--radio) !important;
  color: var(--texto) !important;
  font-family: var(--grotesca) !important;
  font-size: 1.0625rem !important; /* 16px o más: evita el zoom automático en iPhone */
  line-height: 1.3 !important;
  box-shadow: none !important;
}

#formulario-mailerlite .ml-subscribe-form.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input::placeholder {
  color: #7b808c !important;
  opacity: 1;
}

#formulario-mailerlite .ml-subscribe-form.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input:focus {
  border-color: var(--tinta) !important;
  outline: 3px solid var(--calco) !important;
  outline-offset: 0 !important;
}

#formulario-mailerlite .ml-subscribe-form.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow .ml-error input {
  border-color: #a33a2f !important;
}

/* Sus bloques flotan; aquí van en flujo normal para que el aviso legal no se monte encima */
#formulario-mailerlite .ml-subscribe-form.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions,
#formulario-mailerlite .ml-subscribe-form.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow,
#formulario-mailerlite .ml-subscribe-form.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit {
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
}

/* Consentimiento para recibir más recursos */
#formulario-mailerlite .ml-subscribe-form.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsContent {
  margin: 0 0 1.1rem !important;
  padding: 1rem 0 0;
  border-top: 1px dashed var(--linea);
}

#formulario-mailerlite .ml-subscribe-form.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsContent h4 {
  margin: 0 0 0.35rem !important;
  color: var(--texto) !important;
  font-family: var(--grotesca) !important;
  font-size: 1.0625rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}

#formulario-mailerlite .ml-subscribe-form.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsContent p {
  margin: 0 0 0.9rem !important;
  color: var(--texto-suave) !important;
  font-family: var(--serif) !important;
  font-size: 0.9375rem !important;
  line-height: 1.5 !important;
}

#formulario-mailerlite .ml-subscribe-form.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsOptionsCheckbox label {
  min-height: 1.5rem !important;
  padding-left: 2.1rem !important;
  cursor: pointer;
}

#formulario-mailerlite .ml-subscribe-form.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsOptionsCheckbox .label-description {
  color: var(--texto) !important;
  font-family: var(--grotesca) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  line-height: 1.375rem !important;
}

/* La casilla la dibuja MailerLite con ::before (caja) y ::after (marca); aquí se agranda y se pasa a tinta */
#formulario-mailerlite .ml-subscribe-form.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsOptionsCheckbox .label-description::before,
#formulario-mailerlite .ml-subscribe-form.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsOptionsCheckbox .label-description::after {
  top: 0 !important;
  left: -2.1rem !important;
  width: 1.375rem !important;
  height: 1.375rem !important;
}

#formulario-mailerlite .ml-subscribe-form.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsOptionsCheckbox .label-description::before {
  background-color: #ffffff !important;
  border: 1.5px solid #8a8f9c !important;
  border-radius: var(--radio) !important;
}

#formulario-mailerlite .ml-subscribe-form.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsOptionsCheckbox .label-description::after {
  background-size: 60% 60% !important;
}

#formulario-mailerlite .ml-subscribe-form.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsOptionsCheckbox input[type="checkbox"]:checked ~ .label-description::before {
  background-color: var(--tinta) !important;
  border-color: var(--tinta) !important;
}

/* La casilla real está oculta: el foco de teclado se muestra en la caja dibujada */
#formulario-mailerlite .ml-subscribe-form.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsOptionsCheckbox input[type="checkbox"]:focus-visible ~ .label-description::before {
  outline: 3px solid var(--tinta);
  outline-offset: 2px;
}

#formulario-mailerlite .ml-subscribe-form.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedPermissionsOptionsCheckbox .description {
  margin: 0.3rem 0 0 2.1rem !important;
  color: var(--texto-suave) !important;
  font-family: var(--serif) !important;
  font-size: 0.875rem !important;
  font-style: normal !important;
  line-height: 1.45 !important;
}

/* Aviso legal (primera capa de información). En el HTML va justo debajo del botón;
   estas reglas también sirven si vuelve a quedar dentro de .ml-form-embedPermissions, encima del botón. */
#formulario-mailerlite .ml-subscribe-form.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedMailerLite-GDPR {
  margin: 1rem 0 0 !important;
  padding: 0 !important;
}

#formulario-mailerlite .ml-subscribe-form.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions .ml-form-embedMailerLite-GDPR {
  margin: 0 0 1.1rem !important;
}

/* A 10 px, como venía de MailerLite, era ilegible en el móvil */
#formulario-mailerlite .ml-subscribe-form.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedMailerLite-GDPR p {
  margin: 0 !important;
  color: var(--texto-suave) !important;
  font-family: var(--serif) !important;
  font-size: 0.875rem !important;
  line-height: 1.5 !important;
}

#formulario-mailerlite .ml-subscribe-form.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedPermissions a,
#formulario-mailerlite .ml-subscribe-form.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedMailerLite-GDPR a {
  color: var(--tinta) !important;
  text-decoration: underline !important;
}

/* Botón de envío (y el de "cargando" que MailerLite muestra mientras envía) */
#formulario-mailerlite .ml-subscribe-form.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button {
  width: 100% !important;
  min-height: 3.25rem !important;
  height: auto !important;
  padding: 0.85rem 1.4rem !important;
  background: var(--tinta) !important;
  border: 1.5px solid var(--tinta) !important;
  border-radius: var(--radio) !important;
  color: var(--sobre-tinta) !important;
  font-family: var(--grotesca) !important;
  font-size: 1.0625rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  box-shadow: none !important;
  cursor: pointer;
}

#formulario-mailerlite .ml-subscribe-form.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button:hover {
  background: var(--tinta-hover) !important;
  border-color: var(--tinta-hover) !important;
}

/* Mensaje de éxito (normalmente no se ve: MailerLite redirige a /gracias) */
#formulario-mailerlite .ml-subscribe-form.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent h4,
#formulario-mailerlite .ml-subscribe-form.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent p {
  color: var(--texto) !important;
  font-family: var(--grotesca) !important;
}

/* Páginas sencillas: gracias y 404 */

.pagina-simple {
  padding-block: 2rem 4.5rem;
  isolation: isolate;
}

.pagina-simple .hoja-contenido {
  padding: 2rem 1.25rem 2.25rem;
}

.pagina-simple h1 {
  font-size: clamp(2.2rem, 9vw, 3.6rem);
  font-weight: 850;
  line-height: 1.03;
  letter-spacing: -0.035em;
}

.pagina-simple p {
  max-width: 34rem;
  margin-top: 1rem;
  font-size: 1.1875rem;
  color: var(--texto-suave);
}

.pagina-simple .boton {
  width: 100%;
  margin-top: 2rem;
}

/* Textos legales */

.legal {
  max-width: 44rem;
  padding-block: 1.5rem 4rem;
}

.legal h1 {
  font-size: clamp(2rem, 8vw, 3rem);
  font-weight: 850;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.legal .actualizado {
  margin-top: 0.75rem;
  font-family: var(--grotesca);
  font-size: 0.9375rem;
  color: var(--texto-suave);
}

.legal h2 {
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--linea);
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.015em;
}

.legal p,
.legal ul {
  margin-top: 0.85rem;
}

.legal ul {
  padding-left: 1.25rem;
}

.legal li + li {
  margin-top: 0.4rem;
}

.revisar {
  padding: 0.05em 0.3em;
  background: #fbe9a6;
  color: #5a4300;
  font-family: var(--grotesca);
  font-size: 0.85em;
  font-weight: 700;
  border-radius: 2px;
}

/* A partir de tablet */

@media (min-width: 40rem) {
  :root {
    --margen: 2rem;
  }

  .acciones {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .hero {
    padding-block: 4rem 4.5rem;
  }

  .presupuesto-cabecera {
    grid-template-columns: 1fr auto;
    align-items: end;
    padding: 2rem 2rem 1.5rem;
  }

  .presupuesto-meta {
    flex-direction: column;
    text-align: right;
  }

  .presupuesto-meta div {
    justify-content: flex-end;
  }

  .presupuesto-columnas {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: 2rem;
    padding: 0.7rem 2rem;
    border-bottom: 1px solid var(--linea);
    font-family: var(--grotesca);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--tinta);
  }

  .concepto {
    grid-template-columns: 2fr 3fr;
    gap: 2rem;
    padding: 1.6rem 2rem;
  }

  .presupuesto-pie {
    padding: 1.25rem 2rem 1.5rem;
  }

  .guia-bloque {
    grid-template-columns: 3fr 2fr;
    align-items: center;
    gap: 3rem;
    padding: 3rem;
  }

  .guia-bloque .boton {
    width: auto;
  }

  .portada {
    width: min(15rem, 100%);
  }

  .sobre-mi-rejilla {
    grid-template-columns: 13rem 1fr;
    gap: 3rem;
    align-items: start;
  }

  .foto {
    width: 100%;
  }

  .cierre .hoja-contenido,
  .pagina-simple .hoja-contenido {
    padding: 3rem;
  }

  .cierre .boton,
  .pagina-simple .boton {
    width: auto;
  }

  .landing-form .hoja-contenido {
    padding: 2rem;
  }
}

@media (min-width: 64rem) {
  .seccion {
    padding-block: 5rem;
  }

  .hero {
    padding-block: 5.5rem 5.5rem;
  }

  .guia-bloque {
    padding: 3.5rem 4rem;
  }

  .landing {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-areas:
      "intro   portada"
      "incluye form";
    column-gap: 4.5rem;
    row-gap: 3rem;
    padding-block: 3rem 5rem;
    align-items: start;
  }

  .landing-portada {
    align-self: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}