/* ==========================================================================
   Carlos Armas — sistema de diseño compartido («aura» editorial)
   Lienzo blanco, tinta negra y mucho aire. Titulares y lectura en
   Cormorant Garamond (autoalojada); rótulos, menú y botones en una sans
   diminuta, en mayúsculas y espaciada. Botones negros macizos y casi
   rectos, líneas finas de 1px y ningún color de acento: el contraste
   «informático» lo ponen los paneles negros de terminal en monoespaciada.
   Solo el punto «en línea» es verde (es funcional).
   Lo usan las páginas principales, las legales y la 404.
   Los efectos (arranque, descifrado, red, focos) están en /assets/js/efectos.js
   y todo se ve completo sin JavaScript.
   ========================================================================== */

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-latin-300-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-latin-400-italic.woff2") format("woff2");
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-latin-500-italic.woff2") format("woff2");
}

/* Ángulo animable para el trazo de los bordes. */
@property --angulo {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

:root {
  color-scheme: light;

  /* Lienzo y superficies (blanco y grises cálidos casi imperceptibles) */
  --fondo: #ffffff;
  --superficie: #faf9f7;
  --superficie-2: #f4f3f0;
  --superficie-3: #ecebe7;
  --borde: #e7e5e0;
  --borde-fuerte: #cfccc4;

  /* Tinta */
  --tinta: #11100f;
  --tinta-2: #4f4d49;   /* texto secundario: 8,3:1 sobre blanco */
  --tinta-3: #6b6a66;   /* metadatos diminutos: 5,3:1 sobre blanco */
  --tinta-4: #a19f99;   /* solo decoración (glifos, puntos) */

  /* Panel negro «de sistema» (terminal, consola, llamado final) */
  --negro-panel: #11100f;
  --negro-panel-2: #1b1a18;
  --panel-borde: rgba(255, 255, 255, 0.12);
  --panel-tinta: #f5f4f1;
  --panel-tinta-2: #b9b7b1;  /* 9:1 sobre el panel */
  --panel-tinta-3: #8f8d87;  /* 5,6:1 sobre el panel */

  /* Antiguos acentos, ahora monocromos (las páginas aún pueden citarlos) */
  --acento: #11100f;
  --acento-fuerte: #11100f;
  --cian: var(--tinta);
  --enlace: var(--tinta);
  --verde: #1e8c4e;
  --degradado: linear-gradient(90deg, #11100f 0%, #5d5b57 100%);
  --brillo: none;

  /* Alias heredados (legal.css y páginas antiguas) */
  --negro: var(--tinta);
  --blanco: var(--fondo);
  --niebla: var(--superficie-2);
  --escarcha: var(--superficie);
  --gris: var(--tinta-2);
  --gris-claro: var(--tinta-3);
  --gris-control: var(--borde-fuerte);
  --linea-suave: var(--borde);
  --linea: var(--borde);
  --papel: var(--superficie);
  --azul: var(--tinta);
  --azul-boton: var(--tinta);
  --azul-boton-hover: #2b2a27;
  --naranja: #8a5a12;

  /* Tipografía */
  --serif: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;  /* rótulos, menú y botones */
  --mono: ui-monospace, "Cascadia Code", "SF Mono", Consolas, Menlo, monospace;
  --display: var(--serif);
  --texto-fuente: var(--serif);

  /* Rótulo diminuto (menú, botones, sobrelíneas) */
  --mini-tamano: 11px;
  --mini-espacio: 0.2em;

  /* Medidas */
  --ancho: 1200px;
  --margen: clamp(16px, 4vw, 48px);
  --seccion: clamp(72px, 9vw, 128px);
  --cabecera: 72px;
  --radio: 2px;
  --radio-grande: 4px;
  --radio-chico: 2px;
  --radio-campo: 0px;
  --radio-nav: 0px;
  --curva: cubic-bezier(0.2, 0.7, 0.2, 1);
  --contorno: 0 0 0 1px var(--borde);
  --sombra-suave: 0 24px 60px -36px rgba(17, 16, 15, 0.28);
}

/* ---------- Base ---------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--cabecera) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  position: relative;
  margin: 0;
  min-height: 100vh;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.01em;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Rejilla técnica de fondo: fija, apenas un susurro de tinta. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(17, 16, 15, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 16, 15, 0.035) 1px, transparent 1px);
  background-size: 96px 96px;
  background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 10%, transparent 80%);
  mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 10%, transparent 80%);
}

::selection {
  background: var(--tinta);
  color: #fff;
}

img,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--tinta);
  outline-offset: 3px;
  border-radius: 0;
}

button {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

em {
  font-style: italic;
}

p {
  text-wrap: pretty;
}

.saltar {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 300;
  padding: 12px 20px;
  background: var(--tinta);
  color: #fff;
  font-family: var(--sans);
  font-size: var(--mini-tamano);
  font-weight: 700;
  letter-spacing: var(--mini-espacio);
  text-transform: uppercase;
}

.saltar:focus {
  top: 12px;
}

[hidden] {
  display: none !important;
}

.visualmente-oculto {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.mono {
  font-family: var(--mono);
  letter-spacing: 0;
}

/* Rótulo diminuto reutilizable (mismo trazo que el menú y los botones). */
.mini {
  font-family: var(--sans);
  font-size: var(--mini-tamano);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: var(--mini-espacio);
  text-transform: uppercase;
}

/* ---------- Contenedor ---------- */

.pagina {
  max-width: calc(var(--ancho) + 2 * var(--margen));
  margin: auto;
  padding-inline: var(--margen);
}

/* ---------- Tipografía ---------- */

/* Sobrelínea numerada: «01 —— // SERVICIOS» (sans diminuta y espaciada). */
.rotulo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 22px;
  color: var(--tinta);
  font-family: var(--sans);
  font-size: var(--mini-tamano);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: var(--mini-espacio);
  text-transform: uppercase;
}

.rotulo-num {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--tinta-3);
  font-family: var(--mono);
  font-weight: 400;
  letter-spacing: 0.04em;
}

/* Rótulo de «línea de comandos» en cabeceras: «> carlos_armas», «~/proyectos». */
.portada .rotulo,
.cabecera-pagina .rotulo {
  color: var(--tinta-2);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
}

/* Guion fino tras el número: «01 ——» */
.rotulo-num::after {
  content: "";
  width: 32px;
  height: 1px;
  background: var(--borde-fuerte);
}

.titulo-portada {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(46px, 6.6vw, 92px);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

.titulo-pagina {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(44px, 6vw, 84px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

.titulo-seccion {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(36px, 4.4vw, 58px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* Palabra destacada en titulares: cursiva, misma tinta (antes era un degradado). */
.degradado,
.titulo-portada em,
.titulo-pagina em,
.titulo-seccion em {
  color: inherit;
  -webkit-text-fill-color: currentColor;
  background: none;
  font-style: italic;
  font-weight: 400;
}

.texto {
  max-width: 640px;
  margin: 0 0 16px;
  color: var(--tinta-2);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.6;
}

.texto-grande {
  max-width: 600px;
  margin: 0;
  color: var(--tinta-2);
  font-size: clamp(21px, 1.9vw, 24px);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.005em;
}

.texto strong,
.texto-grande strong {
  color: var(--tinta);
  font-weight: 600;
}

.texto a,
.texto-grande a {
  color: var(--tinta);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--borde-fuerte);
  text-underline-offset: 4px;
}

.texto a:hover,
.texto-grande a:hover {
  text-decoration-color: currentColor;
}

/* Encabezado de sección: rótulo + titular (+ texto) y enlace a la derecha. */
.encabezado {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 40px;
  margin-bottom: clamp(40px, 5vw, 64px);
}

.encabezado > div {
  max-width: 760px;
}

.encabezado .texto {
  margin: 18px 0 0;
}

/* ---------- Detalles «de sistema» ---------- */

/* Píldora de estado: «● DISPONIBLE PARA NUEVOS PROYECTOS» */
.estado {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 7px 14px 7px 12px;
  border: 1px solid var(--borde);
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.85);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.estado-punto {
  position: relative;
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--verde);
}

.estado-punto::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--verde);
  animation: latido 2.4s var(--curva) infinite;
}

@keyframes latido {
  0% { transform: scale(1); opacity: 0.55; }
  80%, 100% { transform: scale(2.6); opacity: 0; }
}

/* Cursor que parpadea */
.cursor {
  display: inline-block;
  width: 0.5em;
  height: 1.05em;
  margin-left: 4px;
  vertical-align: -0.16em;
  background: currentColor;
  animation: parpadeo 1.1s steps(1) infinite;
}

@keyframes parpadeo {
  50% { opacity: 0; }
}

/* Chips técnicos */
.etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.etiquetas li {
  padding: 4px 9px;
  border: 1px solid var(--borde);
  border-radius: 0;
  background: #fff;
  color: var(--tinta-2);
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.5;
  letter-spacing: 0.01em;
}

/* ---------- Cabecera ---------- */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--cabecera);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.cabecera::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 calc(50% - 50vw);
  border-bottom: 1px solid var(--borde);
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
}

/* Barra de progreso de lectura (la mueve efectos.js). */
.cabecera::after {
  content: "";
  position: absolute;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  bottom: -1px;
  height: 1px;
  background: var(--tinta);
  transform: scaleX(var(--progreso, 0));
  transform-origin: 0 50%;
  pointer-events: none;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 44px;
  line-height: 1.2;
}

.monograma {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 0;
  background: var(--tinta);
  color: #fff;
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-indent: 0.08em;
}

.marca-nombre {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

.marca-nombre small {
  color: var(--tinta-3);
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
}

.menu {
  display: flex;
  align-items: center;
  gap: 6px;
}

.menu a {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 0 12px;
  color: var(--tinta);
  font-family: var(--sans);
  font-size: var(--mini-tamano);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: color 0.2s, background-color 0.2s;
}

.menu a:hover {
  color: var(--tinta-2);
}

.menu a[aria-current="page"] {
  color: var(--tinta);
}

@media (min-width: 761px) {
  .menu a::after {
    content: "";
    position: absolute;
    left: 12px;
    right: calc(12px + 0.18em);
    bottom: 8px;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform 0.35s var(--curva);
  }

  .menu a:hover::after,
  .menu a[aria-current="page"]::after {
    transform: scaleX(1);
  }

  /* Contacto = conversión: botón negro macizo */
  .menu .menu-cta {
    margin-left: 14px;
    padding: 0 20px;
    background: var(--tinta);
    color: #fff;
  }

  .menu .menu-cta:hover {
    background: #2b2a27;
    color: #fff;
  }

  .menu .menu-cta::after {
    display: none;
  }
}

.menu-boton {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  cursor: pointer;
  color: var(--tinta);
}

.menu-boton > span:first-child {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.menu-boton .rayas {
  position: relative;
  width: 24px;
  height: 9px;
}

.menu-boton .rayas::before,
.menu-boton .rayas::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: currentColor;
  transition: transform 0.3s var(--curva), top 0.3s var(--curva), right 0.3s var(--curva);
}

.menu-boton .rayas::before { top: 0; }
.menu-boton .rayas::after { top: 8px; right: 7px; }
.menu-boton[aria-expanded="true"] .rayas::before { top: 4px; transform: rotate(45deg); }
.menu-boton[aria-expanded="true"] .rayas::after { top: 4px; right: 0; transform: rotate(-45deg); }

/* ---------- Botones y enlaces ---------- */

.boton {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 30px;
  overflow: hidden;
  border: 1px solid var(--tinta);
  border-radius: 0;
  background: var(--tinta);
  box-shadow: none;
  color: #fff;
  cursor: pointer;
  font-family: var(--sans);
  font-size: var(--mini-tamano);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: var(--mini-espacio);
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform 0.2s var(--curva), border-color 0.25s, background-color 0.25s, color 0.25s;
}

/* Barrido de luz muy tenue al pasar el ratón */
.boton::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.14) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.8s var(--curva);
}

.boton:hover {
  border-color: #2b2a27;
  background: #2b2a27;
}

.boton:hover::after {
  transform: translateX(120%);
}

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

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

.boton-linea:hover {
  border-color: var(--tinta);
  background: var(--tinta);
  color: #fff;
}

.boton-linea::after {
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
}

.boton .flecha,
.boton-linea .flecha {
  color: inherit;
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0;
}

.boton[disabled],
.boton[aria-disabled="true"] {
  border-color: var(--borde-fuerte);
  background: var(--superficie-2);
  color: var(--tinta-3);
  pointer-events: none;
}

.acciones {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

/* Enlace con flecha: «VER TODOS →» */
.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--tinta);
  font-family: var(--sans);
  font-size: var(--mini-tamano);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: var(--mini-espacio);
  text-transform: uppercase;
}

.enlace-flecha > span:first-child {
  padding-bottom: 3px;
  border-bottom: 1px solid var(--tinta);
}

.enlace-flecha .flecha {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0;
}

.enlace-flecha:hover > span:first-child {
  border-bottom-color: transparent;
}

.flecha {
  display: inline-block;
  flex: none;
  color: currentColor;
  line-height: 1;
  transition: transform 0.25s var(--curva);
}

a:hover .flecha,
button:hover .flecha {
  transform: translateX(3px);
}

.subrayado:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

/* ---------- Secciones ---------- */

.seccion {
  position: relative;
  padding-block: var(--seccion);
}

.seccion-borde {
  border-top: 1px solid var(--borde);
}

/* Banda a todo el ancho sin salir del contenedor. */
.banda {
  background: var(--superficie);
  box-shadow: 0 0 0 100vmax var(--superficie);
  clip-path: inset(0 -100vmax);
}

/* Banda negra a todo el ancho (texto en blanco). */
.banda-negra {
  background: var(--negro-panel);
  box-shadow: 0 0 0 100vmax var(--negro-panel);
  clip-path: inset(0 -100vmax);
  color: var(--panel-tinta);
}

/* Cabecera de las páginas interiores (servicios, proyectos…) */
.cabecera-pagina {
  position: relative;
  isolation: isolate;
  padding-block: clamp(64px, 9vw, 128px) clamp(56px, 7vw, 96px);
  border-bottom: 1px solid var(--borde);
}

.cabecera-pagina .texto-grande {
  margin-top: 26px;
}

.cabecera-pagina .acciones {
  margin-top: 40px;
}

/* (antes: halo de color detrás de las cabeceras; en el aura blanca no hay halo) */
.cabecera-pagina::before,
.portada::before {
  content: none;
}

/* Barrido de escaneo: una línea de tinta casi invisible. */
.escaner {
  position: absolute;
  z-index: -1;
  inset: 0 calc(50% - 50vw);
  overflow: hidden;
  pointer-events: none;
}

.escaner::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 120px;
  /* Velo muy suave que termina en una línea fina (sin franja de bordes duros). */
  background:
    linear-gradient(180deg, rgba(17, 16, 15, 0) 0%, rgba(17, 16, 15, 0.012) 60%, rgba(17, 16, 15, 0.03) 100%) top / 100% calc(100% - 1px) no-repeat,
    linear-gradient(rgba(17, 16, 15, 0.08), rgba(17, 16, 15, 0.08)) bottom / 100% 1px no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
  transform: translateY(-130px);
  animation: escanear 8s cubic-bezier(0.45, 0, 0.55, 1) 1.2s infinite;
}

@keyframes escanear {
  0% { transform: translateY(-130px); opacity: 0; }
  10% { opacity: 1; }
  60% { opacity: 1; }
  70%, 100% { transform: translateY(var(--escaner-alto, 600px)); opacity: 0; }
}

/* Lienzo de la red animada (efectos.js). Color: --red-rgb; intensidad: --red-alfa. */
.red {
  --red-rgb: 17, 16, 15;
  --red-alfa: 1;
  position: absolute;
  z-index: -1;
  inset: 0 calc(50% - 50vw);
  width: 100vw;
  max-width: none;
  height: 100%;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 70% 85% at 74% 45%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 85% at 74% 45%, #000 20%, transparent 75%);
}

/* ---------- Superficies con trazo de borde y foco del cursor ---------- */

.tarjeta,
.fila,
.panel,
.llamado-panel {
  --x: 50%;
  --y: 50%;
  position: relative;
  isolation: isolate;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: #fff;
}

/* Trazo: un degradado cónico de tinta que gira por el borde de 1px. */
.tarjeta::before,
.fila::before,
.panel::before,
.llamado-panel::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 1;
  padding: 1px;
  border-radius: inherit;
  background: conic-gradient(from var(--angulo), transparent 0deg, transparent 240deg, rgba(17, 16, 15, 0.35) 300deg, #11100f 345deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s;
  animation: trazo 3.6s linear infinite paused;
}

/* Foco del cursor: un velo gris casi imperceptible */
.tarjeta::after,
.fila::after,
.panel::after,
.llamado-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(380px circle at var(--x) var(--y), rgba(17, 16, 15, 0.045), transparent 50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s;
}

@keyframes trazo {
  to { --angulo: 360deg; }
}

a.tarjeta:hover,
a.fila:hover,
.tarjeta:focus-within,
.fila:focus-within {
  border-color: var(--borde-fuerte);
}

a.tarjeta:hover::before,
a.fila:hover::before,
a.tarjeta:focus-visible::before,
a.fila:focus-visible::before,
.panel-vivo::before {
  opacity: 1;
  animation-play-state: running;
}

a.tarjeta:hover::after,
a.fila:hover::after,
.panel:hover::after,
.llamado-panel:hover::after {
  opacity: 1;
}

/* ---------- Tarjetas (rejilla) ---------- */

.rejilla {
  display: grid;
  grid-template-columns: repeat(var(--columnas, 3), minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rejilla > li {
  display: flex;
  min-width: 0;
}

.rejilla-2 { --columnas: 2; }
.rejilla-4 { --columnas: 4; }

.tarjeta {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 26px 26px 26px;
  transition: border-color 0.3s, transform 0.4s var(--curva);
}

a.tarjeta:hover {
  transform: translateY(-3px);
}

.tarjeta-cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}

.icono {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  border: 1px solid var(--borde);
  border-radius: 0;
  background: #fff;
  color: var(--tinta);
  transition: color 0.3s, border-color 0.3s, background-color 0.3s;
}

.icono svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

a.tarjeta:hover .icono,
a.fila:hover .icono {
  border-color: var(--tinta);
  background: var(--tinta);
  color: #fff;
}

.tarjeta-num {
  color: var(--tinta-3);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
}

.tarjeta h3 {
  margin: 0;
  font-family: var(--display);
  font-size: 25px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.005em;
}

.tarjeta p {
  margin: 0;
  color: var(--tinta-2);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.45;
}

.tarjeta-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 16px;
  color: var(--tinta-3);
  font-family: var(--mono);
  font-size: 12px;
}

.tarjeta-pie .flecha {
  color: var(--tinta);
  font-family: var(--serif);
  font-size: 18px;
}

/* Tarjeta de cierre «Ver todo» */
.tarjeta-mas {
  justify-content: space-between;
  border-style: dashed;
  border-color: var(--borde-fuerte);
  background: transparent;
}

.tarjeta-mas h3 {
  color: var(--tinta);
  font-style: italic;
}

/* ---------- Filas de lista (imagen + texto) ---------- */

.lista-filas {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lista-filas > li {
  display: flex;
  min-width: 0;
}

/* Dos columnas en escritorio (portada) */
@media (min-width: 1081px) {
  .lista-filas-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .lista-filas-2 .fila {
    grid-template-columns: 168px minmax(0, 1fr) auto;
    gap: 24px;
  }
}

.fila {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
  padding: 14px 24px 14px 14px;
  transition: border-color 0.3s;
}

/* Miniatura con barra de navegador (gris claro) */
.fila-imagen {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--borde);
  border-radius: 0;
  background: var(--superficie-2);
}

.fila-imagen::before {
  content: "";
  position: relative;
  z-index: 1;
  display: block;
  height: 13px;
  border-bottom: 1px solid var(--borde);
  background:
    radial-gradient(circle at 8px 50%, rgba(17, 16, 15, 0.32) 1.8px, transparent 2.3px),
    radial-gradient(circle at 15px 50%, rgba(17, 16, 15, 0.2) 1.8px, transparent 2.3px),
    radial-gradient(circle at 22px 50%, rgba(17, 16, 15, 0.12) 1.8px, transparent 2.3px),
    var(--superficie-2);
}

.fila-imagen img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: 50% 0;
  transform: scale(var(--escala, 1));
  transform-origin: 50% 100%;
  transition: transform 0.8s var(--curva);
}

/* Recorta la franja superior de una captura (p. ej. un aviso o un menú). */
.fila-imagen .recorte {
  --escala: 1.09;
}

a.fila:hover .fila-imagen img {
  transform: scale(calc(var(--escala, 1) * 1.04));
}

.fila-cuerpo {
  min-width: 0;
}

.fila-meta,
.fila .fila-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 0 0 8px;
  color: var(--tinta-3);
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.fila-meta .bandera {
  padding: 1px 5px;
  border: 1px solid var(--tinta);
  color: var(--tinta);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.04em;
}

.fila h3 {
  margin: 0 0 4px;
  font-family: var(--display);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.005em;
}

.fila p {
  margin: 0;
  color: var(--tinta-2);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.45;
}

.fila .etiquetas {
  margin-top: 12px;
}

.fila-flecha {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--borde);
  border-radius: 50%;
  color: var(--tinta);
  font-family: var(--serif);
  font-size: 18px;
  transition: color 0.3s, border-color 0.3s, background-color 0.3s, transform 0.3s var(--curva);
}

a.fila-flecha:hover,
a.fila:hover .fila-flecha {
  border-color: var(--tinta);
  background: var(--tinta);
  color: #fff;
  transform: translateX(3px);
}

/* Fila grande (página /proyectos) */
.fila-grande {
  grid-template-columns: 300px minmax(0, 1fr) auto;
  gap: 36px;
  padding: 16px 28px 16px 16px;
}

.fila-grande h3 {
  font-size: clamp(28px, 2.8vw, 36px);
}

/* Fila de cierre «Y muchos más» */
.fila-mas {
  border-style: dashed;
  border-color: var(--borde-fuerte);
  background: transparent;
}

.fila-mas h3 {
  font-style: italic;
}

.fila-mas .fila-imagen {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 11.4;
  border-style: dashed;
  background:
    linear-gradient(rgba(17, 16, 15, 0.05) 1px, transparent 1px) 0 0 / 16px 16px,
    linear-gradient(90deg, rgba(17, 16, 15, 0.05) 1px, transparent 1px) 0 0 / 16px 16px,
    #fff;
}

.fila-mas .fila-imagen::before {
  display: none;
}

.fila-mas-icono {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 0;
  background: var(--tinta);
  color: #fff;
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 400;
  line-height: 1;
}

/* ---------- Pasos (cómo trabajo) ---------- */

.pasos {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: paso;
}

/* Línea fina que une los pasos, con un pulso de tinta que la recorre */
.pasos::before {
  content: "";
  position: absolute;
  top: 21px;
  left: 21px;
  right: 21px;
  height: 1px;
  background: var(--borde-fuerte);
}

.pasos::after {
  content: "";
  position: absolute;
  top: 20px;
  left: 21px;
  width: 96px;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--tinta), transparent);
  animation: pulso-pasos 5s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

@keyframes pulso-pasos {
  0% { transform: translateX(0); opacity: 0; }
  10% { opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translateX(calc(var(--pasos-ancho, 1000px) - 140px)); opacity: 0; }
}

.pasos li {
  position: relative;
  counter-increment: paso;
}

.paso-num {
  position: relative;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 22px;
  border: 1px solid var(--tinta);
  border-radius: 0;
  background: #fff;
  color: var(--tinta);
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 400;
}

.pasos li:hover .paso-num {
  background: var(--tinta);
  color: #fff;
}

.pasos h3 {
  margin: 0 0 4px;
  font-family: var(--display);
  font-size: 25px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.005em;
}

.pasos p {
  margin: 0;
  color: var(--tinta-2);
  font-size: 18px;
  line-height: 1.45;
}

/* ---------- Promesa de cobro (mismo bloque en todas las páginas comerciales) ----------
   «No pagas hasta que estés en Google.» en grande, con «Google» letra a letra
   en sus colores pero en Cormorant (no imita el logotipo). Cada letra es un
   <span> sin espacios entre ellos: el lector de pantalla lee «Google» seguido.
   Entra con la aparición normal (sin descifrado, para que el color no parpadee). */

.promesa {
  padding-block: clamp(84px, 12vw, 184px);
}

.promesa-cuerpo {
  max-width: 1120px;
}

.promesa-titulo {
  margin: 0;
  color: var(--tinta);
  font-family: var(--display);
  font-size: clamp(48px, 8.6vw, 132px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.026em;
  text-wrap: balance;
}

.google {
  font-weight: 500;
  white-space: nowrap;
}

.g-azul { color: #4285f4; }
.g-rojo { color: #ea4335; }
.g-amarillo { color: #fbbc05; }
.g-verde { color: #34a853; }

.promesa-sub {
  max-width: 900px;
  margin: clamp(22px, 2.6vw, 36px) 0 0;
  color: var(--tinta-2);
  font-family: var(--display);
  font-size: clamp(24px, 2.7vw, 38px);
  font-style: italic;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

.promesa-nota {
  max-width: 560px;
  margin: clamp(36px, 4vw, 56px) 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--borde);
  color: var(--tinta-3);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
}

/* En móvil la frase manda: más grande, en tres líneas cortas. */
@media (max-width: 760px) {
  .promesa-titulo {
    font-size: clamp(48px, 13.6vw, 88px);
    line-height: 1.02;
  }
}

/* Las letras de «Google» se encienden en orden, ya en su color (solo opacidad). */
.efectos .promesa .visto .google > span {
  animation: promesa-letra 0.6s var(--curva) both;
  animation-delay: calc(0.42s + var(--l, 0) * 70ms);
}

.google > :nth-child(2) { --l: 1; }
.google > :nth-child(3) { --l: 2; }
.google > :nth-child(4) { --l: 3; }
.google > :nth-child(5) { --l: 4; }
.google > :nth-child(6) { --l: 5; }

@keyframes promesa-letra {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---------- Terminal decorativa (panel negro, monoespaciada blanca) ---------- */

.terminal {
  --angulo: 0deg;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--negro-panel);
  border-radius: var(--radio-grande);
  background: var(--negro-panel);
  box-shadow: 0 40px 80px -48px rgba(17, 16, 15, 0.55);
  color: var(--panel-tinta-2);
  font-family: var(--mono);
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0;
}

.terminal-barra {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--panel-borde);
  color: var(--panel-tinta-3);
  font-size: 12px;
}

.terminal-barra i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
}

.terminal-barra i:first-child { background: rgba(255, 255, 255, 0.42); }
.terminal-barra i:nth-child(2) { background: rgba(255, 255, 255, 0.28); }
.terminal-barra i:nth-child(3) { background: rgba(255, 255, 255, 0.16); }

.terminal-barra span {
  margin-left: auto;
  margin-right: auto;
  transform: translateX(-20px);
}

.terminal-cuerpo {
  padding: 20px 22px 22px;
  color: var(--panel-tinta-2);
}

.t-linea {
  display: block;
  width: fit-content;
  max-width: 100%;
  min-height: 1.75em;
  white-space: pre;
}

.t-pre { color: var(--panel-tinta-3); }
.t-ok { color: #fff; }
.t-tinta { color: #fff; }
.t-gris { color: var(--panel-tinta-3); }
.t-azul { color: var(--panel-tinta-2); font-style: italic; }
.t-error { color: #f1b9ad; }

.terminal-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 16px;
  border-top: 1px solid var(--panel-borde);
  background: var(--negro-panel-2);
  color: var(--panel-tinta-3);
  font-size: 11.5px;
}

.terminal-pie .t-ok {
  color: var(--panel-tinta);
}

/* El único verde: el punto «en línea» */
.terminal-pie .t-ok::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 8px;
  border-radius: 50%;
  background: #3fbf74;
  vertical-align: 0.08em;
}

.terminal .cursor {
  background: #fff;
}

/* ---------- Llamado final (banda negra a todo el ancho) ---------- */

.llamado {
  position: relative;
  z-index: 1;
  margin-bottom: -1px; /* tapa la línea superior del pie */
  padding-block: var(--seccion) 0;
}

.seccion + .llamado {
  padding-top: 0;
}

.llamado-panel {
  overflow: visible;
  padding: clamp(64px, 9vw, 120px) 0;
  border: 0;
  border-radius: 0;
  background: var(--negro-panel);
  box-shadow: 0 0 0 100vmax var(--negro-panel);
  clip-path: inset(0 -100vmax);
  color: var(--panel-tinta);
}

.llamado-panel::before {
  display: none;
}

.llamado-panel::after {
  inset: 0 calc(50% - 50vw);
  background: radial-gradient(520px circle at var(--x) var(--y), rgba(255, 255, 255, 0.05), transparent 55%);
}

.llamado-panel .rejilla-fondo {
  position: absolute;
  inset: 0 calc(50% - 50vw);
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: center center;
  -webkit-mask-image: radial-gradient(ellipse 45% 90% at 85% 50%, #000, transparent 75%);
  mask-image: radial-gradient(ellipse 45% 90% at 85% 50%, #000, transparent 75%);
}

.llamado-contenido {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 32px 56px;
}

.llamado-contenido > div {
  max-width: 680px;
}

.llamado .texto,
.banda-negra .texto,
.llamado-panel .texto {
  margin: 20px 0 0;
  color: var(--panel-tinta-2);
}

.llamado-panel .rotulo,
.banda-negra .rotulo {
  color: var(--panel-tinta);
}

.llamado-panel .rotulo-num,
.banda-negra .rotulo-num {
  color: var(--panel-tinta-3);
}

.llamado-panel .rotulo-num::after,
.banda-negra .rotulo-num::after {
  background: rgba(255, 255, 255, 0.24);
}

.llamado-panel .glifo,
.banda-negra .glifo {
  color: #6f6d68;
  -webkit-text-fill-color: #6f6d68;
}

/* Botones invertidos sobre negro */
.llamado-panel .boton,
.banda-negra .boton {
  border-color: #fff;
  background: #fff;
  color: var(--tinta);
}

.llamado-panel .boton:hover,
.banda-negra .boton:hover {
  border-color: #e7e5e0;
  background: #e7e5e0;
}

.llamado-panel .boton::after,
.banda-negra .boton::after {
  background: linear-gradient(105deg, transparent 30%, rgba(17, 16, 15, 0.08) 50%, transparent 70%);
}

.llamado-panel .boton-linea,
.banda-negra .boton-linea {
  border-color: rgba(255, 255, 255, 0.55);
  background: transparent;
  color: #fff;
}

.llamado-panel .boton-linea:hover,
.banda-negra .boton-linea:hover {
  border-color: #fff;
  background: #fff;
  color: var(--tinta);
}

.llamado-panel a:focus-visible,
.llamado-panel button:focus-visible,
.banda-negra a:focus-visible,
.banda-negra button:focus-visible {
  outline-color: #fff;
}

/* ---------- Pie ---------- */

.pie {
  position: relative;
  margin-top: 0;
  border-top: 1px solid var(--borde);
  background: #fff;
  color: var(--tinta-2);
  font-size: 17px;
  line-height: 1.5;
}

.pie-columnas {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: 40px;
  padding-block: 72px 48px;
}

.pie-marca .marca {
  margin-bottom: 16px;
}

.pie-marca p {
  max-width: 330px;
  margin: 0 0 20px;
  color: var(--tinta-2);
  font-size: 18px;
  font-style: italic;
}

.pie-marca .estado {
  max-width: none;
  margin: 0;
  color: var(--tinta);
  font-size: 10.5px;
  font-style: normal;
  line-height: 1.4;
}

.pie-contacto {
  display: grid;
  gap: 0;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--serif);
  font-size: 18px;
}

.pie-contacto a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  color: var(--tinta);
  letter-spacing: 0.02em;
}

.pie-contacto a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.pie .etiqueta,
.pie-titulo {
  margin: 0;
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.pie-columnas ul:not(.pie-contacto) {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.pie-columnas li a,
.pie-columnas li button {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--tinta-2);
  cursor: pointer;
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-align: left;
  transition: color 0.2s;
}

.pie-columnas li a:hover,
.pie-columnas li button:hover {
  color: var(--tinta);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.pie-base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 24px;
  min-height: 72px;
  border-top: 1px solid var(--borde);
  color: var(--tinta-3);
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.copyright,
.firma {
  margin: 0;
  color: var(--tinta-3);
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.volver {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.volver:hover {
  color: var(--tinta-2);
}

/* ---------- Formularios ---------- */

.campo {
  display: grid;
  gap: 10px;
}

.campo label {
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  min-height: 54px;
  padding: 13px 16px;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-campo);
  background: #fff;
  color: var(--tinta);
  font: 500 19px/1.4 var(--serif);
  appearance: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.campo select {
  padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, var(--tinta) 50%), linear-gradient(135deg, var(--tinta) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  border-color: var(--tinta);
  outline: none;
  box-shadow: 0 0 0 3px rgba(17, 16, 15, 0.1);
}

.campo textarea {
  min-height: 160px;
  resize: vertical;
}

.campo input::placeholder,
.campo textarea::placeholder {
  color: var(--tinta-3);
  font-style: italic;
}

/* ---------- Preguntas (details) ---------- */

.preguntas {
  border-top: 1px solid var(--borde);
}

.pregunta {
  border-bottom: 1px solid var(--borde);
}

.pregunta summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 72px;
  padding-block: 18px;
  cursor: pointer;
  font-family: var(--display);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.25;
  list-style: none;
}

.pregunta summary::-webkit-details-marker {
  display: none;
}

.pregunta summary::after {
  content: "+";
  flex: none;
  color: var(--tinta);
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 300;
  line-height: 1;
  transition: transform 0.25s var(--curva);
}

.pregunta[open] summary::after {
  transform: rotate(45deg);
}

.pregunta p {
  max-width: 720px;
  margin: 0 0 24px;
  color: var(--tinta-2);
}

/* ---------- Heredado (páginas legales / 404) ---------- */

.etiqueta {
  margin: 0;
  color: var(--tinta-2);
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.etiqueta-gris {
  color: var(--tinta-3);
}

.numero {
  color: var(--tinta-3);
  font-family: var(--mono);
  font-size: 12px;
}

.cita {
  margin: 0;
  font-family: var(--display);
  font-size: 26px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.3;
}

.seccion-titulo {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
}

.seccion-titulo .etiqueta {
  color: var(--tinta);
}

.cabecera-pagina .superior {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 18px;
}

.cabecera-pagina .superior .etiqueta:first-child {
  color: var(--tinta);
}

.cabecera-pagina .inferior {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  margin-top: 26px;
}

.cabecera-pagina .inferior .texto {
  max-width: 680px;
  margin: 0;
  font-size: 21px;
}

.franja {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding-block: 16px;
  color: var(--tinta-2);
  font-family: var(--mono);
  font-size: 12px;
}

.lista-indice {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--borde);
}

.lista-indice > li {
  border-bottom: 1px solid var(--borde);
}

.fila-indice {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) 24px;
  align-items: baseline;
  gap: 8px 32px;
  padding-block: 26px;
}

.fila-indice .numero {
  display: none;
}

.fila-indice h3 {
  margin: 0;
  font-family: var(--display);
  font-size: 26px;
  font-weight: 500;
  line-height: 1.15;
  transition: color 0.2s;
}

.fila-indice p {
  margin: 0;
  color: var(--tinta-2);
  font-size: 18px;
}

.fila-indice .flecha {
  justify-self: end;
  color: var(--tinta);
  font-family: var(--serif);
  font-size: 20px;
}

a.fila-indice:hover h3 {
  font-style: italic;
}

/* ---------- Aviso y preferencias de cookies (sitio.js) ---------- */

.cookies {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 90;
  width: min(440px, calc(100vw - 32px));
  padding: 26px 26px 22px;
  border: 1px solid var(--borde);
  border-radius: 0;
  background: #fff;
  box-shadow: 0 24px 60px -28px rgba(17, 16, 15, 0.3);
  color: var(--tinta);
  transform: translateY(16px);
  opacity: 0;
  transition: transform 0.5s var(--curva), opacity 0.5s var(--curva);
}

.cookies.visible {
  transform: none;
  opacity: 1;
}

.cookies .etiqueta {
  color: var(--tinta-3);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.4;
}

.cookies .etiqueta::before {
  content: "// ";
  font-family: var(--mono);
  letter-spacing: 0;
}

.cookies h2 {
  margin: 8px 0 8px;
  font-family: var(--display);
  font-size: 27px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.005em;
}

.cookies p {
  margin: 0;
  color: var(--tinta-2);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.5;
}

.cookies p a {
  color: var(--tinta);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.cookies-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.cookies-acciones .boton {
  flex: 1 1 auto;
  min-height: 44px;
  padding: 0 16px;
  font-size: 10.5px;
  letter-spacing: 0.18em;
}

.preferencias {
  width: min(580px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 1px solid var(--borde);
  border-radius: 0;
  background: #fff;
  box-shadow: 0 40px 100px -40px rgba(17, 16, 15, 0.4);
  color: var(--tinta);
}

.preferencias::backdrop {
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.preferencias-contenido {
  position: relative;
  padding: 36px 32px 28px;
}

.preferencias .etiqueta {
  color: var(--tinta-3);
}

.preferencias .etiqueta::before {
  content: "// ";
  font-family: var(--mono);
  letter-spacing: 0;
}

.preferencias-cerrar {
  position: absolute;
  top: 18px;
  right: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--borde);
  border-radius: 0;
  background: #fff;
  cursor: pointer;
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.preferencias-cerrar span {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
}

.preferencias-cerrar:hover {
  border-color: var(--tinta);
}

.preferencias h2 {
  margin: 8px 0 10px;
  font-family: var(--display);
  font-size: 34px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.015em;
}

.preferencias .intro {
  margin: 0 0 20px;
  color: var(--tinta-2);
  font-size: 17px;
  line-height: 1.5;
}

.opcion-cookie {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 6px 20px;
  padding-block: 18px;
  border-top: 1px solid var(--borde);
}

.opcion-cookie h3 {
  margin: 0;
  font-family: var(--display);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.2;
}

.opcion-cookie p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--tinta-2);
  font-size: 17px;
  line-height: 1.5;
}

.interruptor {
  position: relative;
  width: 46px;
  height: 26px;
}

.interruptor input {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.interruptor span {
  position: absolute;
  inset: 0;
  border: 1px solid var(--borde-fuerte);
  border-radius: 9999px;
  background: #fff;
  transition: background-color 0.2s, border-color 0.2s;
}

.interruptor span::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--tinta-3);
  transition: transform 0.25s var(--curva), background-color 0.2s;
}

.interruptor input:checked + span {
  border-color: var(--tinta);
  background: var(--tinta);
}

.interruptor input:checked + span::after {
  background: #fff;
  transform: translateX(20px);
}

.interruptor input:disabled + span {
  opacity: 0.5;
}

.interruptor input:focus-visible + span {
  outline: 2px solid var(--tinta);
  outline-offset: 3px;
}

.preferencias .cookies-acciones {
  padding-top: 20px;
  border-top: 1px solid var(--borde);
}

/* ==========================================================================
   Animaciones de entrada
   - [data-aparecer]: sitio.js añade .visto al entrar en pantalla.
   - [data-aparecer][data-escalonar]: los hijos entran en cascada (efectos.js pone --i).
   - [data-entrada]: portada; entra cuando efectos.js marca html.listo.
   Sin JavaScript todo queda visible.
   ========================================================================== */

.js [data-aparecer] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.9s var(--curva), transform 0.9s var(--curva);
}

.js [data-aparecer].visto {
  opacity: 1;
  transform: none;
}

.js [data-aparecer][data-escalonar] {
  opacity: 1;
  transform: none;
}

.js [data-aparecer][data-escalonar] > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.8s var(--curva), transform 0.8s var(--curva);
  transition-delay: calc(var(--i, 0) * 80ms);
}

.js [data-aparecer][data-escalonar].visto > * {
  opacity: 1;
  transform: none;
}

.efectos:not(.listo) [data-entrada] {
  opacity: 0;
}

.efectos.listo [data-entrada] {
  animation: entrada 1s var(--curva) both;
  animation-delay: calc(var(--i, 0) * 100ms);
}

@keyframes entrada {
  from { opacity: 0; transform: translateY(14px); filter: blur(4px); }
  to { opacity: 1; transform: none; filter: none; }
}

/* Tecleo de la terminal: cada línea se descubre de izquierda a derecha. */
.efectos [data-teclear] .t-linea {
  clip-path: inset(0 100% 0 0);
}

.efectos [data-teclear].tecleando .t-linea {
  animation: teclear 0.55s steps(24, end) forwards;
  animation-delay: calc(var(--n, 0) * 0.42s + 0.35s);
}

@keyframes teclear {
  to { clip-path: inset(0 0 0 0); }
}

/* Descifrado de titulares: la capa (aria-hidden) se pinta encima del texto real. */
[data-descifrar] {
  position: relative;
}

.descifrando {
  visibility: hidden;
}

.descifrar-capa {
  position: absolute;
  inset: 0;
  visibility: visible;
  pointer-events: none;
}

.glifo {
  color: var(--tinta-4);
  -webkit-text-fill-color: var(--tinta-4);
}

/* ---------- Arranque (primera vista de la sesión) ---------- */

/* Velo inmediato (lo activa un script en <head>); se retira solo aunque falle el JS. */
.arranque body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 199;
  background: var(--fondo);
  animation: arranque-seguro 0.2s linear 1.3s forwards;
}

@keyframes arranque-seguro {
  to { opacity: 0; visibility: hidden; }
}

.arranque-capa {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--fondo);
  transition: opacity 0.24s ease, transform 0.24s ease;
}

.arranque-capa::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(17, 16, 15, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 16, 15, 0.045) 1px, transparent 1px);
  background-size: 96px 96px;
  background-position: center center;
  -webkit-mask-image: radial-gradient(ellipse 45% 45% at 50% 50%, #000, transparent 80%);
  mask-image: radial-gradient(ellipse 45% 45% at 50% 50%, #000, transparent 80%);
}

.arranque-capa.fuera {
  opacity: 0;
  transform: scale(1.01);
  pointer-events: none;
}

.arranque-caja {
  position: relative;
  width: min(340px, 100%);
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.85;
  color: var(--tinta-2);
}

.arranque-marca {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 20px;
  color: var(--tinta);
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.arranque-marca small {
  margin-left: auto;
  color: var(--tinta-3);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  text-transform: none;
}

.arranque-lineas {
  min-height: calc(3 * 1.85em);
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.arranque-lineas li {
  min-height: 1.85em;
  white-space: pre;
}

.arranque-lineas .t-ok {
  color: var(--tinta);
}

.arranque-barra {
  position: relative;
  height: 1px;
  overflow: hidden;
  background: var(--borde);
}

.arranque-barra span {
  position: absolute;
  inset: 0;
  background: var(--tinta);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.68s cubic-bezier(0.6, 0.05, 0.3, 1);
}

.arranque-capa.cargando .arranque-barra span {
  transform: scaleX(1);
}

/* ---------- Tabletas ---------- */

@media (max-width: 1080px) {
  .rejilla-4 { --columnas: 2; }

  .pie-columnas {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .pie-columnas > :first-child {
    grid-column: 1 / -1;
  }

  .pasos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 20px;
  }

  .pasos::before,
  .pasos::after {
    display: none;
  }

  .fila-grande {
    grid-template-columns: 240px minmax(0, 1fr) auto;
  }
}

/* ---------- Móvil ---------- */

@media (max-width: 760px) {
  :root {
    --cabecera: 62px;
    --seccion: 72px;
  }

  body {
    font-size: 19px;
  }

  .marca-nombre {
    font-size: 17px;
    letter-spacing: 0.22em;
  }

  .marca-nombre small {
    display: none;
  }

  .monograma {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }

  .menu-boton {
    display: inline-flex;
  }

  .menu {
    position: fixed;
    inset: 0;
    z-index: -1;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: calc(var(--cabecera) + 28px) var(--margen) 40px;
    background: #fff;
    counter-reset: menu;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s var(--curva), visibility 0s linear 0.3s;
  }

  .menu-abierto .menu {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.3s var(--curva);
  }

  .menu a {
    min-height: 68px;
    padding: 0;
    border-bottom: 1px solid var(--borde);
    color: var(--tinta);
    font-family: var(--display);
    font-size: 38px;
    font-weight: 400;
    letter-spacing: 0.01em;
    text-transform: none;
    counter-increment: menu;
  }

  .menu a::before {
    content: "0" counter(menu);
    width: 48px;
    color: var(--tinta-3);
    font-family: var(--mono);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0;
  }

  .menu a:hover {
    background: none;
  }

  .menu a[aria-current="page"] {
    font-style: italic;
  }

  .menu-abierto {
    overflow: hidden;
  }

  .menu-abierto .cookies {
    visibility: hidden;
  }

  .rejilla,
  .rejilla-2,
  .rejilla-4 {
    --columnas: 1;
    gap: 10px;
  }

  .titulo-seccion {
    font-size: clamp(36px, 9.6vw, 44px);
  }

  /* Tarjetas en fila: icono a la izquierda, texto a la derecha */
  .tarjeta {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: start;
    gap: 2px 16px;
    padding: 18px;
  }

  .tarjeta-cabeza {
    display: contents;
  }

  .tarjeta .icono {
    grid-column: 1;
    grid-row: 1 / 3;
  }

  .tarjeta-num {
    position: absolute;
    top: 18px;
    right: 18px;
  }

  .tarjeta h3,
  .tarjeta p {
    grid-column: 2;
    padding-right: 24px;
  }

  .tarjeta h3 {
    font-size: 23px;
  }

  .tarjeta p {
    font-size: 17.5px;
    line-height: 1.4;
  }

  .fila,
  .fila-grande {
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 16px;
    padding: 10px 14px 10px 10px;
  }

  .fila-flecha {
    display: none;
  }

  .fila-imagen::before {
    height: 9px;
    background:
      radial-gradient(circle at 6px 50%, rgba(17, 16, 15, 0.32) 1.4px, transparent 1.9px),
      radial-gradient(circle at 11px 50%, rgba(17, 16, 15, 0.2) 1.4px, transparent 1.9px),
      radial-gradient(circle at 16px 50%, rgba(17, 16, 15, 0.12) 1.4px, transparent 1.9px),
      var(--superficie-2);
  }

  .fila h3 {
    font-size: 23px;
  }

  .fila p {
    font-size: 17px;
    line-height: 1.35;
  }

  .fila .fila-meta {
    margin-bottom: 4px;
    font-size: 10px;
    letter-spacing: 0.14em;
  }

  .fila-mas-icono {
    width: 34px;
    height: 34px;
    font-size: 22px;
  }

  /* Pasos en lista vertical: número a la izquierda, texto a la derecha */
  .pasos {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    border-top: 1px solid var(--borde);
  }

  .pasos li {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 2px 18px;
    padding-block: 16px;
    border-bottom: 1px solid var(--borde);
  }

  .paso-num {
    grid-row: 1 / span 2;
    width: 38px;
    height: 38px;
    margin-bottom: 0;
  }

  .pasos h3 {
    margin: 0;
    font-size: 23px;
  }

  .pasos p {
    grid-column: 2;
  }

  .llamado-contenido .acciones {
    width: 100%;
  }

  .pie-columnas {
    grid-template-columns: 1fr 1fr;
    gap: 36px 20px;
    padding-block: 52px 36px;
  }

  .pie-base {
    padding-block: 16px;
  }

  .fila-indice {
    grid-template-columns: minmax(0, 1fr) 24px;
    gap: 6px 16px;
    padding-block: 20px;
  }

  .fila-indice p {
    grid-column: 1 / 2;
    grid-row: 2;
  }

  .fila-indice .flecha {
    grid-row: 1;
    grid-column: 2;
  }

  .cookies {
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
    padding: 20px 20px 16px;
  }

  .cookies h2 {
    font-size: 25px;
  }

  .preferencias-contenido {
    padding: 30px 20px 22px;
  }

  .preferencias h2 {
    font-size: 30px;
  }
}

@media (max-width: 400px) {
  .boton {
    padding: 0 20px;
  }

  .acciones .boton {
    flex: 1 1 auto;
  }

  .fila,
  .fila-grande {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 14px;
  }

  .marca-nombre {
    font-size: 16px;
    letter-spacing: 0.18em;
  }
}

@media (max-width: 340px) {
  .pie-columnas {
    grid-template-columns: 1fr;
  }
}

/* ---------- Sin movimiento ---------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }

  .js [data-aparecer],
  .js [data-aparecer][data-escalonar] > *,
  [data-entrada] {
    opacity: 1 !important;
    transform: none !important;
  }

  .escaner {
    display: none;
  }

  .arranque body::after,
  .arranque-capa {
    display: none;
  }
}

@media print {
  body::before,
  .cabecera nav,
  .menu-boton,
  .cookies,
  .preferencias,
  .red,
  .escaner,
  .arranque-capa {
    display: none !important;
  }

  .cabecera {
    position: static;
  }

  body {
    background: #fff;
    color: #000;
  }
}

/* ==========================================================================
   WhatsApp: glifo verde junto al número y en los botones de WhatsApp
   (el pie usa ::before porque sitio.js reescribe el texto del enlace con el número)
   ========================================================================== */
svg.wa-glifo,
.icono svg.wa-glifo {
  width: 16px;
  height: 16px;
  flex: none;
  fill: #25d366;
  stroke: none;
}

.boton svg.wa-glifo {
  width: 17px;
  height: 17px;
  margin: -2px 0;
}

.icono svg.wa-glifo {
  width: 21px;
  height: 21px;
}

.pie-contacto a[data-contacto="whatsapp"]::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  margin-right: 10px;
  background: #25d366;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (forced-colors: active) {
  .pie-contacto a[data-contacto="whatsapp"]::before {
    background: CanvasText;
  }
}