/* Surtifull — hoja unica, sin framework. Movil primero.
   Base grafito, azul acero para la confianza, ambar solo en lo que se toca. */

:root {
  color-scheme: light;

  /* --------------------------------------------------------------- color */
  --grafito: #191C22;
  --grafito-2: #23272F;
  --acero: #1F4E79;
  --acero-tenue: #E8F0F8;
  --ambar: #D98324;
  --ambar-vivo: #E89230;
  --ambar-texto: #9A5A0F;  /* el ambar de marca no da 4.5:1 con texto pequeno sobre blanco */
  --fondo: #F6F7F8;
  --superficie: #FFFFFF;
  --borde: #E2E7EC;
  --borde-fuerte: #CBD3DC;
  --texto: #191C22;
  --texto-tenue: #57606E;
  --sobre-oscuro: #FFFFFF;
  --sobre-oscuro-tenue: #B6BEC9;
  --borde-oscuro: rgba(255, 255, 255, .14);

  /* -------------------------------------------------------------- espacio */
  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px; --e5: 24px;
  --e6: 32px; --e7: 48px; --e8: 64px; --e9: 96px;

  --radio: 14px;
  --radio-ctrl: 10px;
  --ancho: 1180px;
  /* margen lateral unico: si la cabecera y el contenido no lo comparten,
     el logo no queda alineado con el texto de abajo */
  --pad: var(--e4);

  /* --------------------------------------------------------------- forma */
  /* sombras con desplazamiento y difuminado: un halo centrado es decoracion */
  --sombra: 0 2px 4px rgba(25, 28, 34, .05), 0 12px 28px -8px rgba(25, 28, 34, .12);
  --sombra-alta: 0 4px 8px rgba(25, 28, 34, .06), 0 24px 48px -12px rgba(25, 28, 34, .18);

  /* las curvas de serie son flojas: estas tienen intencion */
  --sal: cubic-bezier(0.23, 1, 0.32, 1);
  --entra-sal: cubic-bezier(0.77, 0, 0.175, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* superficies del navegador: tambien son parte del diseno */
  scrollbar-color: var(--borde-fuerte) transparent;
  scrollbar-width: thin;
}
html::-webkit-scrollbar { width: 11px; height: 11px; }
html::-webkit-scrollbar-track { background: transparent; }
html::-webkit-scrollbar-thumb {
  background: var(--borde-fuerte);
  border: 3px solid var(--fondo);
  border-radius: 99px;
}
html::-webkit-scrollbar-thumb:hover { background: var(--texto-tenue); }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: Manrope, ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--ambar); color: var(--grafito); }
:root { caret-color: var(--acero); }

img, svg { max-width: 100%; }
[hidden] { display: none !important; }

a { color: var(--acero); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }

h1, h2, h3 {
  margin: 0 0 .5em;
  line-height: 1.12;
  letter-spacing: -0.025em;
  font-weight: 800;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 7.4vw, 4.25rem); }
h2 { font-size: clamp(1.6rem, 4.6vw, 2.5rem); }
h3 { font-size: 1.14rem; letter-spacing: -0.015em; }
p { margin: 0 0 1rem; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

.tel-num { font-variant-numeric: tabular-nums; }

/* foco: un anillo doble que se ve igual sobre claro y sobre grafito */
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--ambar);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(217, 131, 36, .25);
  border-radius: 6px;
}

.salto-contenido { position: absolute; left: -9999px; top: 0; z-index: 60; }
.salto-contenido:focus {
  left: var(--e3); top: var(--e3);
  background: var(--grafito); color: #fff;
  padding: var(--e3) var(--e5);
  border-radius: var(--radio-ctrl);
  font-weight: 700; text-decoration: none;
}

/* ------------------------------------------------------------------ marco */
.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding-inline: var(--pad);
}

.seccion { padding-block: var(--e8); }
.seccion--borde { border-top: 1px solid var(--borde); }
section[id] { scroll-margin-top: 76px; }

.seccion__intro {
  max-width: 68ch;
  color: var(--texto-tenue);
  font-size: 1.05rem;
}

/* ------------------------------------------------------------- cabecera */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--superficie);
  border-top: 3px solid var(--ambar);
  border-bottom: 1px solid var(--borde);
}
.cabecera__fila {
  display: flex;
  align-items: center;
  gap: var(--e2);
  min-height: 62px;
  padding: var(--e2) var(--pad);
  max-width: var(--ancho);
  margin: 0 auto;
}
.cabecera__marca {
  display: flex; align-items: center;
  color: var(--grafito);
  text-decoration: none;
  flex: 0 1 auto;
  min-width: 0;
  margin-right: auto;
}
/* el SVG ya viene alineado por dentro: la teja y las mayusculas comparten
   centro vertical, asi que centrar la caja centra la marca de verdad */
.cabecera__marca svg { height: 28px; width: auto; display: block; }

/* boton del menu y boton de WhatsApp: misma altura exacta, 44 px, para que la
   fila lea como una sola linea y no como tres piezas sueltas */
.menu-btn {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  appearance: none; -webkit-appearance: none;
  background: transparent;
  color: var(--texto);
  border: 1px solid var(--borde);
  border-radius: var(--radio-ctrl);
  cursor: pointer;
  transition: background-color 160ms var(--sal), border-color 160ms var(--sal);
}
.menu-btn__ico {
  position: relative;
  display: block;
  width: 18px; height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 200ms var(--entra-sal), opacity 140ms var(--sal);
}
.menu-btn__ico::before, .menu-btn__ico::after {
  content: "";
  position: absolute; left: 0;
  width: 18px; height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 200ms var(--entra-sal), opacity 140ms var(--sal);
}
.menu-btn__ico::before { top: -6px; }
.menu-btn__ico::after { top: 6px; }
/* tres barras -> equis, sin que nada aparezca de la nada */
.menu-btn[aria-expanded="true"] .menu-btn__ico { transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__ico::before { transform: translateY(6px) rotate(90deg); }
.menu-btn[aria-expanded="true"] .menu-btn__ico::after { opacity: 0; transform: translateY(-6px); }

.cabecera__cta { flex: 0 0 auto; height: 44px; min-height: 44px; }
/* en pantallas de 320 px el rotulo no cabe: el boton se queda con el icono */
.cta-txt { display: none; }

.sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* en celular el menu es un panel que baja desde el boton; el estado cerrado es
   el de partida, y nace de la esquina donde esta el boton que lo abrio */
.nav {
  display: none;
  position: absolute;
  top: 100%; left: 0; right: 0;
  /* el relleno del panel descuenta el del enlace, para que el TEXTO caiga en el
     mismo eje que el logo y no 12 px adentro */
  padding: var(--e2) calc(var(--pad) - var(--e3)) var(--e3);
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
  box-shadow: var(--sombra);
  transform-origin: top right;
}
.nav.abierto { display: grid; animation: menu-baja 180ms var(--sal) both; }
@keyframes menu-baja {
  from { opacity: 0; transform: scale(.98) translateY(-8px); }
  to { opacity: 1; transform: none; }
}
.nav a {
  display: flex; align-items: center;
  min-height: 48px;
  padding-inline: var(--e3);
  color: var(--texto);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  border-radius: var(--radio-ctrl);
  border-bottom: 1px solid var(--borde);
}
.nav a:last-child { border-bottom: 0; }

/* sin JavaScript no hay quien abra el panel: la lista se queda en el flujo */
.sin-js .menu-btn { display: none; }
.sin-js .nav {
  display: grid;
  position: static;
  box-shadow: none;
  border-bottom: 0;
  border-top: 1px solid var(--borde);
  flex: 0 0 100%;
  margin-inline: calc(var(--pad) * -1);
  padding-inline: var(--pad);
}
.sin-js .cabecera__fila { flex-wrap: wrap; row-gap: 0; }
.sin-js .cabecera { position: relative; }

/* ------------------------------------------------------------------ botones */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  min-height: 48px;
  padding: var(--e3) var(--e5);
  border: 1px solid transparent;
  border-radius: var(--radio-ctrl);
  font: inherit;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: -0.01em;
  text-align: center;
  text-wrap: balance;
  text-decoration: none;
  cursor: pointer;
  transition: transform 140ms var(--sal), background-color 160ms var(--sal),
              border-color 160ms var(--sal), color 160ms var(--sal);
}
.btn svg { width: 19px; height: 19px; flex: 0 0 auto; }
.btn:active { transform: scale(.97); }

.btn--wa { background: var(--ambar); color: var(--grafito); }
.btn--fantasma { background: transparent; color: var(--sobre-oscuro); border-color: var(--borde-oscuro); }
.btn--claro { background: var(--grafito); color: #fff; }
.btn--sm { min-height: 44px; padding: var(--e2) var(--e4); font-size: .94rem; }
.btn--ancho { width: 100%; }
.btn[aria-disabled="true"] { background: var(--borde-fuerte); color: var(--texto-tenue); }

/* -------------------------------------------------------------- portada */
.portada {
  position: relative;
  overflow: hidden;
  background: var(--grafito);
  color: var(--sobre-oscuro);
  padding-block: var(--e8) var(--e7);
}
/* La foto es textura del oficio, no protagonista: va en blanco y negro, oscurecida,
   y debajo de un velo grafito. El velo no es adorno: es lo que mantiene el texto
   legible sea cual sea la zona clara que traiga la foto. */
.portada__foto {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.portada__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
  filter: grayscale(1) brightness(.62) contrast(1.08);
}
.portada::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(25, 28, 34, .90) 0%, rgba(25, 28, 34, .82) 55%, rgba(25, 28, 34, .94) 100%),
    radial-gradient(90% 120% at 100% 0%, rgba(217, 131, 36, .22), transparent 62%),
    radial-gradient(70% 90% at 0% 100%, rgba(31, 78, 121, .26), transparent 65%);
  pointer-events: none;
}
.portada > *:not(.portada__foto) { position: relative; z-index: 2; }
.portada h1 { max-width: 22ch; margin-bottom: var(--e5); }
.portada h1 .acento { color: var(--ambar); }
.portada__sub {
  max-width: 60ch;
  font-size: clamp(1.05rem, 2.2vw, 1.28rem);
  color: var(--sobre-oscuro-tenue);
  margin-bottom: var(--e6);
}
.portada__acciones { display: grid; gap: var(--e3); margin-bottom: var(--e8); }

/* franja inferior: tres razones para escribir, separadas por filetes */
.razones {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--borde-oscuro);
}
.razon { padding-block: var(--e4); border-bottom: 1px solid var(--borde-oscuro); }
.razon:last-child { border-bottom: 0; }
.razones, .razon dd { margin: 0; }
.razon dt {
  font-size: .96rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: var(--e1);
  color: var(--sobre-oscuro);
  display: flex; align-items: center; gap: var(--e2);
}
.razon dt svg { width: 17px; height: 17px; color: var(--ambar); flex: 0 0 auto; }
.razon dd { font-size: .94rem; color: var(--sobre-oscuro-tenue); }

/* ----------------------------------------------------------- categorias */
.rejilla-cat {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 232px), 1fr));
  gap: var(--e3);
  margin-top: var(--e6);
}
.cat {
  display: flex;
  align-items: center;
  gap: var(--e3);
  min-height: 72px;
  padding: var(--e3) var(--e4);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  text-decoration: none;
  color: var(--texto);
  font-weight: 700;
  transition: border-color 160ms var(--sal), background-color 160ms var(--sal),
              transform 160ms var(--sal);
}
.cat:active { transform: scale(.985); }
.cat__ico {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--radio-ctrl);
  background: var(--acero-tenue);
  color: var(--acero);
  transition: background-color 160ms var(--sal), color 160ms var(--sal);
}
.cat__ico svg { width: 21px; height: 21px; }

/* la tarjeta del enfoque del negocio pesa el doble y lleva el ambar */
.cat--principal { grid-column: span 2; }
.cat--principal .cat__ico { background: var(--ambar); color: var(--grafito); }
.cat__nom { display: block; }
.cat__tag {
  display: block;
  margin-top: 1px;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ambar-texto);
}

/* ---------------------------------------------------------- formularios */
.bloque { display: grid; gap: var(--e7); align-items: start; }

.tarjeta-form {
  background: var(--superficie);
  border: 1px solid var(--borde);   /* elevacion declarada una sola vez */
  border-radius: 16px;
  padding: var(--e5);
}
.campos { display: grid; gap: var(--e4); }
.campo { display: flex; flex-direction: column; gap: var(--e1); min-width: 0; }
.campo label { font-size: .89rem; font-weight: 700; }
.campo label .opt { font-weight: 500; color: var(--texto-tenue); }
.campo label .req { font-weight: 700; color: var(--ambar-texto); }
.campo input, .campo select {
  font: inherit;
  font-size: 1rem;
  color: var(--texto);
  background: var(--fondo);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-ctrl);
  padding: var(--e3);
  min-height: 48px;
  width: 100%;
  min-width: 0;
  transition: border-color 140ms var(--sal), background-color 140ms var(--sal);
}
.campo input::placeholder { color: #737C89; }
.campo input:focus, .campo select:focus { background: var(--superficie); border-color: var(--acero); }

.form__pie { margin-top: var(--e5); display: grid; gap: var(--e3); }
.form__nota { font-size: .88rem; color: var(--texto-tenue); margin: 0; }
.form__aviso { font-size: .92rem; font-weight: 700; color: var(--ambar-texto); margin: 0; }

.pasos { margin: var(--e5) 0 0; padding: 0; list-style: none; display: grid; gap: var(--e4); }
.pasos li { display: flex; gap: var(--e3); align-items: flex-start; }
.paso-num {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 7px;
  background: var(--grafito);
  color: #fff;
  font-size: .85rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* banda de lugar: una foto ancha con su credito. No es adorno: sostiene el
   "el negocio es de Ebejico" que dice el texto de al lado. */
.banda {
  position: relative;
  margin-top: var(--e6);
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--grafito);
}
.banda img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  filter: grayscale(.72) contrast(1.04);
}
.banda__pie {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--e6) var(--e4) var(--e3);
  background: linear-gradient(180deg, transparent, rgba(25, 28, 34, .88));
  color: #fff;
  font-size: .86rem;
  font-weight: 600;
  display: flex;
  flex-wrap: wrap;
  gap: var(--e1) var(--e4);
  justify-content: space-between;
  align-items: flex-end;
}
.banda__pie .credito { font-weight: 500; color: #B6BEC9; font-size: .78rem; }
.banda__pie .credito a { color: #B6BEC9; }

@media (min-width: 900px) {
  .banda img { aspect-ratio: 21 / 8; }
  .banda__pie { padding: var(--e7) var(--e6) var(--e4); font-size: .95rem; }
}

/* foto de apoyo dentro de una columna de texto */
.foto-apoyo {
  display: block;
  margin-top: var(--e6);
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--grafito);
}
.foto-apoyo img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  filter: grayscale(.8) contrast(1.05) brightness(.95);
}

/* ------------------------------------------------------------ cobertura */
/* filas editoriales, no tres tarjetas iguales */
.cobertura { margin-top: var(--e6); border-top: 1px solid var(--borde); }
.cobertura__fila {
  display: grid;
  gap: var(--e2);
  padding-block: var(--e5);
  border-bottom: 1px solid var(--borde);
}
.cobertura__lugar {
  display: flex; align-items: center; gap: var(--e2);
  font-size: clamp(1.3rem, 3.4vw, 1.75rem);
  letter-spacing: -0.025em;
  margin: 0;
}
.cobertura__lugar svg { width: 21px; height: 21px; color: var(--acero); flex: 0 0 auto; }
.cobertura__fila p { color: var(--texto-tenue); margin: 0; max-width: 62ch; }
.cobertura__nota {
  font-size: .86rem;
  font-weight: 700;
  color: var(--acero);
  text-transform: none;
}

/* -------------------------------------------------------------- contacto */
.contacto {
  position: relative;
  overflow: hidden;
  background: var(--grafito);
  color: var(--sobre-oscuro);
  border-radius: 18px;
  padding: var(--e6) var(--e5);
  display: grid;
  gap: var(--e5);
  align-items: center;
}
.contacto::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(80% 140% at 100% 0%, rgba(217, 131, 36, .18), transparent 60%);
  pointer-events: none;
}
.contacto > * { position: relative; }
.contacto h2 { color: var(--sobre-oscuro); }
.contacto p { color: var(--sobre-oscuro-tenue); max-width: 54ch; }
.contacto__tel {
  display: inline-block;
  font-size: clamp(1.9rem, 6.4vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--ambar);
  text-decoration: none;
  margin-top: var(--e2);
}

/* ------------------------------------------------------------ preguntas */
.faq { margin-top: var(--e6); border-top: 1px solid var(--borde); max-width: 80ch; }
.faq details { border-bottom: 1px solid var(--borde); }
.faq summary {
  cursor: pointer;
  list-style: none;
  position: relative;
  padding: var(--e4) var(--e7) var(--e4) 0;
  min-height: 56px;
  display: flex; align-items: center;
  font-weight: 700;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: var(--e2);
  top: 50%;
  width: 13px; height: 2px;
  background: var(--acero);
  transform: translateY(-50%);
}
.faq summary::before {
  content: "";
  position: absolute;
  right: calc(var(--e2) + 5.5px);
  top: 50%;
  width: 2px; height: 13px;
  background: var(--acero);
  transform: translateY(-50%);
  transition: transform 180ms var(--sal), opacity 180ms var(--sal);
}
.faq details[open] summary::before { transform: translateY(-50%) scaleY(0); opacity: 0; }
.faq p { padding: 0 0 var(--e5); color: var(--texto-tenue); max-width: 70ch; }

/* ------------------------------------------------------------------- pie */
.pie {
  background: var(--superficie);
  border-top: 1px solid var(--borde);
  padding-block: var(--e7);
}
.pie__marco {
  display: inline-block;
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: var(--e3) var(--e4);
  margin-bottom: var(--e5);
}
.pie__logo { width: 340px; max-width: 100%; height: auto; display: block; }
.pie__fila {
  display: grid;
  gap: var(--e2);
  font-size: .93rem;
  color: var(--texto-tenue);
}
.pie__fila a { color: var(--texto-tenue); }
.pie__credito {
  margin-top: var(--e4);
  padding-top: var(--e4);
  border-top: 1px solid var(--borde);
  font-size: .82rem;
  color: var(--texto-tenue);
  max-width: 78ch;
}
.pie__credito a { color: var(--texto-tenue); }


/* ======================================================== 640px y mas */
@media (max-width: 519px) {
  .cat--principal { grid-column: span 1; }
}

@media (min-width: 360px) {
  .cta-txt { display: inline; }
}

@media (min-width: 640px) {
  :root { --pad: var(--e5); }
  .portada__acciones { display: flex; flex-wrap: wrap; gap: var(--e3); }
  .razones { grid-template-columns: repeat(3, 1fr); gap: var(--e6); }
  .razon { border-bottom: 0; padding-block: var(--e5) 0; }
  .campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .campo--ancho { grid-column: 1 / -1; }
  .tarjeta-form { padding: var(--e6); }
  .cobertura__fila { grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr); gap: var(--e5); }
  .cobertura__fila p { grid-row: 1; }
  .cobertura__nota { grid-column: 2; }
  .pie__fila { display: flex; flex-wrap: wrap; gap: var(--e3) var(--e6); align-items: center; }
}

/* ======================================================== 900px y mas */
@media (min-width: 900px) {
  body { font-size: 17px; padding-bottom: 0; }
  .seccion { padding-block: var(--e9); }
  section[id] { scroll-margin-top: 88px; }

  /* aqui si vale fijar la cabecera: hay sitio de sobra */
  .cabecera {
    position: sticky;
    top: 0;
    background: color-mix(in srgb, var(--superficie) 88%, transparent);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    backdrop-filter: saturate(140%) blur(10px);
  }
  .cabecera__fila { min-height: 70px; gap: var(--e3); }
  .cabecera__marca svg { height: 32px; }
  .menu-btn { display: none; }
  .nav, .sin-js .nav {
    display: flex;
    position: static;
    flex: 0 1 auto;
    align-items: center;
    gap: var(--e1);
    margin: 0 0 0 auto;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    animation: none;
  }
  .nav a {
    min-height: 40px;
    padding-inline: var(--e3);
    color: var(--texto-tenue);
    font-size: .95rem;
    font-weight: 600;
    border-bottom: 0;
    white-space: nowrap;
  }
  .cabecera__cta { margin-left: var(--e3); }
  .cta-txt { display: inline; }

  .portada { padding-block: var(--e9) var(--e8); }
  .bloque { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: var(--e9); }
  .contacto {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: var(--e8) var(--e8);
  }
}

/* ======================================================= 1200px y mas */
@media (min-width: 1200px) {
  .portada h1 { max-width: 24ch; }
  .razones { gap: var(--e8); }
}

/* =============================================== raton fino, con hover */
@media (hover: hover) and (pointer: fine) {
  a:hover { text-decoration-color: var(--ambar); }
  .nav a:hover { color: var(--texto); background: var(--fondo); }
  .menu-btn:hover { background: var(--fondo); border-color: var(--borde-fuerte); }
  .btn--wa:hover { background: var(--ambar-vivo); }
  .btn--fantasma:hover { background: rgba(255, 255, 255, .10); border-color: rgba(255, 255, 255, .3); }
  .btn--claro:hover { background: var(--grafito-2); }
  .cat:hover { border-color: var(--borde-fuerte); background: var(--superficie); transform: translateY(-2px); }
  .cat:hover .cat__ico { background: var(--acero); color: #fff; }
  .contacto__tel:hover { color: var(--ambar-vivo); }
  .faq summary:hover { color: var(--acero); }
}

/* ==================================================== dedo, no puntero */
@media (pointer: coarse) {
  .nav a { padding-inline: var(--e4); }
  .pie__fila a { padding-block: var(--e2); }
}

/* ================================================= un solo momento de
   movimiento: la portada entra una vez, escalonada. El estado final es el
   de reposo, asi que si la animacion no corre, todo se ve igual. */
@media (prefers-reduced-motion: no-preference) {
  .portada h1, .portada__sub, .portada__acciones, .razones {
    animation: entrar 620ms var(--sal) both;
  }
  .portada__sub { animation-delay: 60ms; }
  .portada__acciones { animation-delay: 120ms; }
  .razones { animation-delay: 180ms; }
}
@keyframes entrar {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* se conservan color y opacidad, que ayudan a entender; se quita el movimiento */
  *, *::before, *::after {
    animation: none !important;
    transition-property: color, background-color, border-color, opacity,
                         text-decoration-color, box-shadow !important;
    transition-duration: 160ms !important;
  }
}

/* ------------------------------------------------------------ oscuro */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --fondo: #12151A;
    --superficie: #1A1E25;
    --borde: #2A3037;
    --borde-fuerte: #3A424C;
    --texto: #ECF0F4;
    --texto-tenue: #9BA5B2;
    --acero: #7AB0E0;
    --acero-tenue: #1F2C38;
    --sombra: 0 2px 4px rgba(0, 0, 0, .35), 0 12px 28px -8px rgba(0, 0, 0, .5);
  }
  .cabecera { background: color-mix(in srgb, var(--superficie) 88%, transparent); }
  .cabecera__marca { color: var(--texto); }
  .portada, .contacto { background: #0E1116; }
  .btn--claro { background: var(--acero); color: #0E1116; }
  .btn--wa { color: #14171C; }
  .paso-num { background: var(--acero); color: #0E1116; }
  .form__aviso, .campo label .req, .cat__tag { color: var(--ambar); }
  .cat--principal .cat__ico { color: #14171C; }
  .campo input::placeholder { color: #808B98; }
  .pie__marco { background: #fff; }
  ::selection { background: var(--ambar); color: #14171C; }
  html::-webkit-scrollbar-thumb { border-color: var(--fondo); }
}
@media (prefers-color-scheme: dark) and (hover: hover) and (pointer: fine) {
  .btn--claro:hover { background: #9CC6EC; }
  .cat:hover { background: var(--acero-tenue); }
}

/* ------------------------------------------------------------- impresion */
@media print {
  .cabecera, .nav, .menu-btn, .portada__acciones, .btn,
  .portada__foto, .banda, .foto-apoyo { display: none !important; }
  body { padding: 0; background: #fff; color: #000; font-size: 12pt; }
  .portada, .contacto { background: #fff !important; color: #000 !important; }
  .portada::before, .contacto::before { display: none; }
  .portada h1 .acento, .contacto__tel, .razon dd, .portada__sub,
  .contacto p, .contacto h2 { color: #000 !important; }
  .seccion { padding-block: 16pt; }
  details { border: 0; }
  details[open] summary::before, summary::after { display: none; }
  /* al imprimir, el telefono tiene que quedar a la vista */
  .contacto__tel::after { content: " · surtifull.com"; font-size: 12pt; font-weight: 600; }
  a[href^="tel:"]::after { content: ""; }
}