/* FUENTE — no borrar.
   El artefacto pide  font-family: var(--font-geist)  pero perdió la definición
   cuando se quitó el import de next/font en layout.tsx (commit del 31 de agosto
   vs. el árbol de trabajo). Sin esto el sitio cae a Arial.
   Stack idéntico al que sirve producción en tld-theme.css v0.2.2. */
:root {
  --font-geist: Geist, ui-sans-serif, system-ui;
  --font-sans: var(--font-geist);
  --font-heading: var(--font-geist);
}

/* Ajustes propios del tema de WordPress.
   Separado a propósito: tld-artefacto.css se regenera desde el artefacto y no
   debe editarse a mano. Todo lo que sea específico de WordPress vive aquí. */

/* Paneles que se muestran y ocultan con JS. */
[hidden] { display: none !important; }

/* Hueco de imagen ya resuelto: misma caja y proporción, con la foto dentro. */
.media-placeholder.tld-media-llena {
  border-style: solid;
  border-color: var(--brand-ink);
  background: var(--brand-cream);
}
.media-placeholder.tld-media-llena img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Franja de contacto del pie. */
.footer-contacto {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
  padding-block: 18px;
  border-top: 1px solid rgb(25 25 25 / 24%);
  font-size: 0.9rem;
}
.footer-contacto a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
  transition: border-color 0.18s ease;
}
.footer-contacto a:hover,
.footer-contacto a:focus-visible { border-bottom-color: var(--brand-ink); }
.footer-contacto svg { width: 1.05em; height: 1.05em; }

/* Panel de contacto: los datos ahora son enlaces reales. */
.contact-pending-panel dd a {
  text-decoration: none;
  border-bottom: 2px solid rgb(25 25 25 / 30%);
}
.contact-pending-panel dd a:hover,
.contact-pending-panel dd a:focus-visible { border-bottom-color: var(--brand-ink); }

/* Contenido suelto (fichas de servicio, entradas, 404). */
.tld-prosa { max-width: 760px; display: grid; gap: 18px; }
.tld-prosa h2 { margin-top: 8px; }
.tld-prosa p { margin-bottom: 14px; line-height: 1.65; }
.tld-prosa ul, .tld-prosa ol { margin: 0 0 14px 20px; list-style: revert; }
.tld-prosa li { margin-bottom: 6px; }
.tld-prosa img { border-radius: var(--radius, 0.9rem); }

/* La barra de administración de WordPress no debe tapar el encabezado fijo. */
body.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar .site-header { top: 46px; }
}

/* Elementor deja a veces contenedores vacíos; que no abran huecos. */
.tld-app .elementor-location-header:empty,
.tld-app .elementor-location-footer:empty { display: none; }



/* ===========================================================================
   PORTADA — mockups Mac + celular
   Sustituyen el stack de tarjetas. Flotan en fases distintas (como Exdos
   updown) y el escenario hace un tilt leve al mover el mouse.
   ========================================================================= */

.home-hero-grid {
  min-height: clamp(560px, 74vh, 720px);
  grid-template-columns: minmax(0, 0.88fr) minmax(440px, 1.12fr);
  gap: clamp(28px, 3.5vw, 52px);
  padding-block: clamp(36px, 4vw, 56px);
  align-items: center;
}

.home-hero h1 {
  font-size: clamp(3.8rem, 5.4vw, 5.75rem);
  max-width: 15ch;
}
.home-hero .hero-text {
  max-width: 46ch;
  font-size: clamp(1.24rem, 1.6vw, 1.5rem);
  line-height: 1.45;
}
.home-hero .eyebrow {
  font-size: 0.86rem;
  padding: 10px 16px;
}

/* La caja ya no reserva altura fija: la Mac va en flujo y es ella quien
   define el alto del bloque, así no queda aire muerto debajo. El celular y el
   badge se enciman sobre ella en absoluto, como en el hero de Exdos. El
   padding inferior del escenario da lugar para que el celular cuelgue por
   debajo de la Mac sin salirse de la sección. */
.tld-hero-devices {
  position: relative;
  /* Anula el min-height de .hero-visual del CSS base (590px): aquí la altura
     la dicta la Mac, no una reserva fija; era lo que dejaba el hueco vacío. */
  min-height: 0;
  perspective: 1100px;
}

/* El escenario gira con el mouse; el JS sólo escribe --rx/--ry y cada capa
   compone su transform con variables, así la flotación CSS no pelea con el
   parallax. */
.tld-device-stage {
  position: relative;
  padding-bottom: clamp(36px, 5vw, 72px);
  transform: rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg));
  transform-style: preserve-3d;
  will-change: transform;
}

.tld-mockup {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0) rotate(var(--rot, 0deg));
  will-change: transform;
}

.tld-mockup img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(12px 22px 0 rgb(25 25 25 / 16%));
  user-select: none;
  pointer-events: none;
}

/* Mac protagonista: en flujo, más ancha que su columna, desbordando hacia el
   borde derecho de la pantalla. */
.tld-mockup-mac {
  --rot: -3deg;
  position: relative;
  width: min(118%, 880px);
  margin-left: auto;
  margin-right: -9%;
  z-index: 1;
}

.tld-mockup-mac img {
  animation: tld-float-mac 5s ease-in-out infinite alternate;
}

/* Celular delante, encimado sobre la esquina de la Mac y colgando por debajo
   gracias al padding del escenario. Más profundo en el parallax. */
.tld-mockup-cel {
  --rot: 8deg;
  position: absolute;
  right: -3%;
  bottom: 0;
  width: min(42%, 300px);
  z-index: 2;
}

.tld-mockup-cel img {
  animation: tld-float-cel 3.6s ease-in-out infinite alternate;
  animation-delay: 0.4s;
}

@keyframes tld-float-mac {
  from { transform: translateY(-10px); }
  to   { transform: translateY(10px); }
}

@keyframes tld-float-cel {
  from { transform: translateY(12px) rotate(-1.5deg); }
  to   { transform: translateY(-14px) rotate(1.5deg); }
}

.tld-hero-devices .hero-note-simple {
  position: absolute;
  left: 0;
  right: auto;
  bottom: clamp(8px, 2vw, 24px);
  z-index: 3;
  padding: 13px 19px;
  border: 2px solid var(--brand-ink);
  box-shadow: 6px 6px 0 var(--brand-ink);
}
.tld-hero-devices .hero-note-simple p {
  font-size: 0.84rem;
  letter-spacing: 0.02em;
}

@media (prefers-reduced-motion: reduce) {
  .tld-mockup img { animation: none; }
  .tld-device-stage,
  .tld-mockup { transform: none; }
}

@media (max-width: 1060px) {
  .home-hero-grid { min-height: auto; grid-template-columns: 1fr; }
  .tld-hero-devices { min-height: 0; width: 100%; max-width: 680px; margin-inline: auto; }
  .tld-mockup-mac { width: 106%; margin-left: -3%; margin-right: 0; }
  .tld-mockup-cel { right: 0; width: min(40%, 250px); }
}

@media (max-width: 620px) {
  .home-hero h1 { font-size: clamp(2.7rem, 11vw, 3.4rem); }
  .home-hero .hero-text { font-size: 1.08rem; }
  .tld-hero-devices { min-height: 0; }
  .tld-mockup-mac { width: 104%; margin-left: -2%; }
  .tld-mockup-cel { width: 42%; }
  .tld-hero-devices .hero-note-simple { padding: 9px 13px; bottom: 4px; }
  .tld-hero-devices .hero-note-simple p { font-size: 0.7rem; }
}

/* ===========================================================================
   CINTA DE REDES — carrusel infinito estilo Metricool, con chips sticker.
   Dos copias de la misma lista dentro del track; la animación desplaza el
   track a -50% y, como ambas copias miden lo mismo (el padding-inline-end de
   cada fila hace de separador), el bucle no da saltos. Al pasar el mouse se
   pausa; con «reducir movimiento» la cinta se vuelve una rejilla estática.
   ========================================================================= */

.redes-section {
  padding-block: clamp(28px, 4vw, 44px);
  border-block: 3px solid var(--brand-ink);
  background: white;
  overflow: hidden;
}

.redes-titulo {
  margin: 0 0 clamp(18px, 2.5vw, 26px);
  font-family: var(--font-head, inherit);
  font-weight: 700;
  font-size: clamp(0.9rem, 1.4vw, 1.05rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  color: var(--brand-ink);
}

.redes-marquee {
  display: flex;
  width: max-content;
  /* Corre siempre: nada de pausas al hover, la cinta es decorativa. */
  animation: tld-marquee 34s linear infinite;
}

/* Va como ul.redes-fila (no sólo .redes-fila) a propósito: el CSS base trae
   un reset `ul[class] { padding: 0 }` que es más específico que una clase
   sola y se comía el padding del empalme — por eso la cinta se veía
   amontonada en el cruce de las dos copias. */
ul.redes-fila {
  display: flex;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  /* Separación generosa: los chips son grandes y con menos de esto se ven
     amontonados (ya pasó dos veces; no volver a apretarlo). */
  gap: clamp(60px, 7vw, 120px);
  /* El hueco final de cada copia: igual al gap para que el empalme sea invisible. */
  padding-inline-end: clamp(60px, 7vw, 120px);
}

.red-chip {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 24px;
  border: 2.5px solid var(--brand-ink);
  border-radius: 999px;
  background: var(--brand-cream, #fffdf8);
  box-shadow: 5px 5px 0 var(--brand-ink);
  white-space: nowrap;
}

/* Rotación mínima: guiño sticker sin que los chips se vean amontonados. */
.redes-fila li:nth-child(odd)  { transform: rotate(-0.7deg); }
.redes-fila li:nth-child(even) { transform: rotate(0.6deg); }

.red-chip img {
  display: block;
  width: clamp(44px, 5vw, 64px);
  height: auto;
}

.red-chip span {
  font-family: var(--font-head, inherit);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.8vw, 1.45rem);
  color: var(--brand-ink);
}

@keyframes tld-marquee {
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .redes-marquee {
    width: auto;
    animation: none;
    justify-content: center;
  }
  .redes-fila { flex-wrap: wrap; justify-content: center; }
  .redes-fila[aria-hidden='true'] { display: none; }
}

/* La cola de «Y N entregables más» en la tarjeta de paquete: chiquita y en
   gris, para intrigar sin competir con la lista. */
.bundle-more-note {
  margin: 10px 0 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: #6d675e;
}

/* Parallax de las ilustraciones de categorías: el transform lo escribe el JS,
   aquí sólo avisamos al navegador y suavizamos la sombra al derivar. */
.category-showcase-item .media-placeholder {
  will-change: transform;
}

/* ===========================================================================
   ESCENA DE COTIZACIÓN — «Cotización inicial» en inicio.
   Cuatro PNG transparentes flotando sueltos sobre el fondo negro de la
   sección (sin caja, sin borde, sin fondo). Tres movimientos conviven sin
   pisarse porque usan canales distintos:
   - parallax de mouse y scroll → variables --mx/--my/--sy en `transform`
     (las escribe cotizacionVisual() en tld-tema.js);
   - idle float → anima la propiedad individual `translate` (no `transform`);
   - guiño del cursor al hover de botones → propiedad individual `scale`.
   ========================================================================= */

.tld-quote-visual {
  position: relative;
  width: 100%;
  max-width: 650px;
  aspect-ratio: 1.25 / 1;
  margin-inline: auto;
}

.tld-quote-capa {
  position: absolute;
  height: auto;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  will-change: transform;
  transform: translate3d(var(--mx, 0px), calc(var(--my, 0px) + var(--sy, 0px)), 0)
             rotate(var(--rot, 0deg));
  animation: tld-quote-idle ease-in-out infinite alternate;
}

/* La máquina es el objeto hero; el cursor va al frente y se mueve más. */
.tld-quote-maquina { top: 10%; left: 3%; width: 71%; z-index: 3; --rot: -2deg; animation-duration: 6s; }
.tld-quote-ideas   { right: 1%; bottom: 7%; width: 33%; z-index: 5; --rot: 3deg; animation-duration: 5.2s; }
.tld-quote-cursor  { left: 54%; bottom: 6%; width: 22%; z-index: 7; --rot: -4deg; animation-duration: 4.4s;
                     scale: 1; transition: scale 0.3s ease; }
.tld-quote-flechas { top: 4%; right: 5%; width: 34%; z-index: 2; --rot: 1.5deg; animation-duration: 7s; }

/* Guiño: al pasar el mouse por los botones de la sección, el cursor
   ilustrado crece 3% (el empujoncito de 6px lo suma el JS al parallax). */
.tld-cursor-saluda .tld-quote-cursor { scale: 1.03; }

@keyframes tld-quote-idle {
  from { translate: 0 0; }
  to   { translate: 0 -4px; }
}

@media (max-width: 1023px) {
  .tld-quote-visual { max-width: 540px; }
}

@media (max-width: 767px) {
  /* La rejilla ya apila la columna visual debajo del texto; aquí sólo se
     acota el tamaño. El parallax de mouse se apaga solo (ver JS). */
  .tld-quote-visual { max-width: 460px; margin-top: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .tld-quote-capa {
    animation: none;
    transform: rotate(var(--rot, 0deg));
    transition: none;
  }
}

/* ===========================================================================
   FAQ COMO CHAT DE WHATSAPP (idea de Metricool)
   El acordeón sigue siendo <details>/<summary>, pero el contenedor es una
   ventana de chat: barra de título oscura con punto «en línea», preguntas
   como burbujas recibidas (blancas, a la izquierda) y respuestas como
   burbujas enviadas (verdes, a la derecha, con sus palomitas). Rompe a
   propósito con el bloque anterior, que es tipográfico y plano.
   ========================================================================= */

.faq-chat {
  overflow: hidden;
  border: 3px solid var(--brand-ink);
  border-radius: 22px;
  background: #efe7db; /* el fondo papel del chat */
  box-shadow: 10px 10px 0 var(--brand-ink);
}

.faq-chat-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  background: var(--brand-ink);
  color: white;
}

.faq-chat-head strong {
  font-size: 0.98rem;
  letter-spacing: 0.01em;
}

.faq-chat-head span:last-child {
  font-size: 0.78rem;
  opacity: 0.65;
}

.faq-chat-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #25d366;
  box-shadow: 0 0 0 3px rgb(37 211 102 / 25%);
}

.faq-chat-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(18px, 2.5vw, 28px);
}

/* Fuera las rayas del acordeón clásico. */
.faq-chat .faq-accordion details,
.faq-chat details {
  border-bottom: 0;
}

/* Pregunta = burbuja que llega (blanca, pegada a la izquierda). */
.faq-chat summary {
  display: flex;
  min-height: 0;
  max-width: min(88%, 520px);
  padding: 12px 18px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  cursor: pointer;
  list-style: none;
  border: 2px solid var(--brand-ink);
  border-radius: 16px;
  border-end-start-radius: 4px;
  background: white;
  box-shadow: 3px 3px 0 var(--brand-ink);
  font-size: 0.96rem;
  font-weight: 800;
  line-height: 1.35;
}

.faq-chat summary::after {
  content: '+';
  flex: 0 0 auto;
  font-size: 1.15rem;
}

.faq-chat details[open] summary::after {
  content: '\2212';
}

/* Respuesta = burbuja enviada (verde, pegada a la derecha, con palomitas). */
.faq-chat details > div {
  max-width: min(88%, 520px);
  margin: 12px 0 0 auto;
  padding: 12px 18px 10px;
  border: 2px solid var(--brand-ink);
  border-radius: 16px;
  border-end-end-radius: 4px;
  background: #d9fdd3;
  box-shadow: 3px 3px 0 var(--brand-ink);
  color: var(--brand-ink);
  font-size: 0.92rem;
  line-height: 1.55;
}

.faq-chat details > div::after {
  content: '\2713\2713';
  display: block;
  margin-top: 2px;
  text-align: right;
  font-size: 0.72rem;
  letter-spacing: -0.12em;
  color: #53bdeb; /* palomitas azules de leído */
}

/* Destinos de ancla de las cuatro rutas. Invisibles, pero con margen de
   desplazamiento para que el encabezado fijo no tape el inicio de la sección. */
.tld-ancla {
  display: block;
  height: 0;
  scroll-margin-top: 110px;
}

/* El diseño dejó de ser una partida aparte: es una opción del producto. */
.tld-diseno-nota {
  margin: 0;
  border-left: 3px solid var(--brand-yellow-deep, var(--brand-yellow));
  padding: 2px 0 2px 11px;
  font-size: 0.82rem;
  line-height: 1.45;
}
.tld-diseno-nota strong { display: block; }

/* Glosario de acabados dentro de la ruta de impresos. */
.tld-glosario { margin-top: 34px; }

/* ===========================================================================
   v0.5.1
   ========================================================================= */

/* Panel de contacto sobre fondo claro.
   .contact-pending-panel nació para la sección oscura del inicio: sus dt son
   blancos al 66% y sus dd amarillos, ilegibles sobre crema. Esta clase sólo
   afecta a la página de contacto; el panel de la portada queda intacto. */
.contact-direct-panel {
  border-top-color: rgb(25 25 25 / 22%);
}
.contact-direct-panel h3,
.contact-direct-panel dd {
  color: var(--brand-ink);
}
.contact-direct-panel dt {
  color: rgb(25 25 25 / 72%);
}
/* El kicker amarillo también viene de la sección oscura y no contrasta aquí. */
.contact-direct-panel .kicker-yellow {
  color: var(--brand-ink);
}
.contact-direct-panel .kicker-yellow::before {
  background: var(--brand-ink);
}
.contact-direct-panel dl > div {
  border-color: rgb(25 25 25 / 28%);
}
.contact-direct-panel dd a {
  color: var(--brand-ink);
  text-decoration: none;
  border-bottom: 2px solid rgb(25 25 25 / 34%);
}
.contact-direct-panel dd a:hover {
  border-bottom-color: var(--brand-ink);
}
.contact-direct-panel dd a:focus-visible {
  outline: 3px solid var(--brand-ink);
  outline-offset: 3px;
  border-radius: 4px;
  background: var(--brand-yellow);
}

/* Complementos dentro de la tarjeta de su servicio padre. */
.tld-complementos {
  display: grid;
  margin: 0;
  padding: 0;
  gap: 6px;
  list-style: none;
  border-top: 1px dashed rgb(25 25 25 / 26%);
  padding-top: 11px;
}
.tld-complementos li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.82rem;
}
.tld-complementos strong { white-space: nowrap; }

/* Bloque auxiliar: diseño sin producto físico asociado. */
.tld-bloque-auxiliar {
  margin-top: 46px;
  border-top: 2px dashed rgb(25 25 25 / 30%);
  padding-top: 34px;
}
.tld-bloque-auxiliar .catalog-grid { margin-top: 22px; }

/* Foco visible en las pestañas, que ahora se navegan con flechas. */
.services-tab-trigger:focus-visible,
.calculator-mode-trigger:focus-visible {
  outline: 3px solid var(--brand-ink);
  outline-offset: 2px;
}

/* ===========================================================================
   v0.5.8 — El cotizador usa las cuatro rutas del sitio
   =========================================================================== */

/* Pasó de dos modos a cuatro pestañas, así que necesita cuatro columnas. Ocupa
   todo el ancho del bloque, el mismo que la rejilla de controles y resultado
   que va debajo: recortado a 880 px quedaba flotando sobre una caja más ancha.
   En pantalla angosta se parte en dos filas de dos en vez de apretar
   «Presencia digital» hasta partirla. */
.calculator-mode-list {
  width: 100%;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
}

.calculator-mode-trigger {
  padding-inline: 8px;
  font-size: 0.9rem;
}

@media (max-width: 820px) {
  .calculator-mode-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 821px) and (max-width: 1100px) {
  .calculator-mode-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ===========================================================================
   v0.5.2 — Tarjetas de paquete
   ========================================================================= */

/* Los paquetes ya no esconden nada tras «Ver todos los detalles»: el desglose
   son dos líneas, así que se lee suelto y en letra pequeña debajo de la caja.
   Cada celda de la rejilla contiene la caja y sus notas. */
.bundle-cell {
  display: grid;
  min-width: 0;
  grid-template-rows: 1fr auto;
  row-gap: 13px;
}

/* Con subgrid, cajas y notas se alinean entre columnas aunque el texto ocupe
   distinto número de líneas. Sin subgrid se ve igual, sólo sin esa alineación. */
@supports (grid-template-rows: subgrid) {
  .bundle-grid .bundle-cell {
    grid-row: span 2;
    grid-template-rows: subgrid;
  }
}

.bundle-notes,
.catalog-notes {
  display: grid;
  gap: 5px;
  padding-inline: 6px;
  color: #5d574e;
  font-size: 0.76rem;
  line-height: 1.5;
}
.bundle-notes p,
.catalog-notes p { margin: 0; }
.bundle-notes-aviso span {
  color: var(--brand-ink);
  font-weight: 850;
}

/* v0.5.7 — Las tarjetas de servicio e impresos siguen el mismo patrón que los
   paquetes: los detalles salen en letra pequeña bajo la caja. En impresos el
   acordeón sobrevive, pero sólo con la tabla de precios por acabado, que es
   una tabla y no una nota al pie. */
.catalog-cell {
  display: grid;
  min-width: 0;
  grid-template-rows: 1fr auto;
  row-gap: 13px;
}

@supports (grid-template-rows: subgrid) {
  .catalog-grid .catalog-cell {
    grid-row: span 2;
    grid-template-rows: subgrid;
  }
}

/* ==========================================================================
   PESTAÑAS DE SERVICIOS — mejor lectura de ruta + explicación
   ========================================================================== */

.filter-label-row {
  display: block;
  margin-bottom: 16px;
}

.filter-label-row strong {
  display: block;
  margin-bottom: 5px;
  color: var(--brand-ink);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.25;
}

.filter-label-row span {
  display: block;
  color: rgb(25 25 25 / 68%);
  font-size: 0.9rem;
  line-height: 1.4;
}

/* Cada pestaña se convierte visualmente en título + explicación.

   Va anclado arriba, no centrado. Las cuatro explicaciones no miden lo mismo
   —«Quiero material impreso» ocupa una línea y «Quiero que mi negocio se vea
   profesional» dos—, así que centrar el bloque dejaba cada título a una altura
   distinta. Anclado arriba, los cuatro títulos caen en la misma línea y las
   cuatro explicaciones empiezan en la misma línea. */
.services-tab-trigger {
  display: flex;
  min-width: 0;
  min-height: 116px;
  padding: 20px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 7px;
  white-space: normal;
  text-align: left;
}

/* La lista nace como flex con `min-width: max-content` para poder desplazarse
   en celular. En pantallas anchas eso dejaba cada ruta con un ancho distinto
   según su texto y un hueco muerto a la derecha, así que ahí pasa a rejilla de
   columnas iguales: las cuatro miden lo mismo y ocupan todo el bloque.
   El texto sigue alineado a la izquierda porque las explicaciones son de dos
   líneas y centradas quedarían con banderas irregulares en ambos lados. */
@media (min-width: 621px) {
  .services-tabs-list {
    display: grid;
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .services-tab-trigger {
    min-width: 0;
  }
}

@media (min-width: 861px) {
  .services-tabs-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Título: Identidad, Presencia digital, Contenido, Impresos. */
.services-tab-trigger > span {
  display: block;
  color: var(--brand-ink);
  font-size: clamp(1.08rem, 1.35vw, 1.35rem);
  font-weight: 800;
  line-height: 1.15;
}

/* Texto explicativo. */
.services-tab-trigger > small {
  display: block;
  max-width: 29ch;
  color: rgb(25 25 25 / 72%);
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.35;
}

/* Pestaña activa. */
.services-tab-trigger[aria-selected="true"] > span,
.services-tab-trigger[aria-selected="true"] > small,
.services-tab-trigger[data-active] > span,
.services-tab-trigger[data-active] > small {
  color: var(--brand-ink);
}

/* Celular */
@media (max-width: 620px) {
  .services-tab-trigger {
    min-width: 238px;
    min-height: 104px;
    padding: 16px;
  }

  .services-tab-trigger > span {
    font-size: 1.05rem;
  }

  .services-tab-trigger > small {
    font-size: 0.8rem;
    line-height: 1.35;
  }
}

/* ===========================================================================
   v0.6.6 — Proceso de trabajo (replanteo)
   El bloque amarillo de cuatro columnas iguales se leía como un formulario.
   Ahora: intro con voz propia + pista con números gigantes y tarjetas cream
   que se escalonan. El amarillo sigue siendo el lienzo de marca.
   ========================================================================= */

.workflow-section {
  overflow: hidden;
}

.workflow-shell {
  display: grid;
  gap: 40px;
  padding-block: 12px 8px;
}

.workflow-intro {
  max-width: 34rem;
}

.workflow-intro h2 {
  margin: 8px 0 0;
  font-size: clamp(2rem, 4vw, 3.1rem);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 0.98;
  color: var(--brand-ink);
}

.workflow-intro > p {
  margin: 14px 0 0;
  max-width: 28rem;
  color: #3a342c;
  font-size: 1.05rem;
  line-height: 1.45;
}

.workflow-track {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
}

/* Línea que une los pasos en desktop. */
.workflow-track::before {
  content: "";
  position: absolute;
  top: 38px;
  left: 8%;
  right: 8%;
  height: 2px;
  background: repeating-linear-gradient(
    90deg,
    var(--brand-ink) 0 10px,
    transparent 10px 18px
  );
  opacity: 0.35;
  pointer-events: none;
}

.workflow-step {
  position: relative;
  display: grid;
  align-content: start;
  min-width: 0;
  /* Escalón: cada paso baja un poco, como una conversación que avanza. */
  padding-top: calc((var(--step, 1) - 1) * 18px);
  animation: tld-workflow-in 0.55s ease both;
  animation-delay: calc((var(--step, 1) - 1) * 0.08s);
}

.workflow-index {
  position: absolute;
  top: calc((var(--step, 1) - 1) * 18px - 8px);
  right: 6px;
  z-index: 0;
  color: var(--brand-ink);
  font-size: clamp(3.2rem, 5vw, 4.6rem);
  font-weight: 900;
  letter-spacing: -0.06em;
  line-height: 0.8;
  opacity: 0.12;
  pointer-events: none;
  user-select: none;
}

.workflow-card {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
  min-height: 200px;
  padding: 20px 18px 22px;
  border: 2px solid var(--brand-ink);
  background: var(--brand-cream);
  box-shadow: 6px 6px 0 var(--brand-ink);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.workflow-step:hover .workflow-card,
.workflow-step:focus-within .workflow-card {
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0 var(--brand-orange);
}

.workflow-card svg {
  width: 28px;
  height: 28px;
  stroke: var(--brand-orange);
  stroke-width: 2.2;
  fill: none;
}

.workflow-card h3 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.1;
  color: var(--brand-ink);
}

.workflow-card p {
  margin: 0;
  color: #4a433a;
  font-size: 0.92rem;
  line-height: 1.45;
}

@keyframes tld-workflow-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .workflow-step {
    animation: none;
  }

  .workflow-card {
    transition: none;
  }
}

@media (max-width: 980px) {
  .workflow-track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .workflow-track::before {
    display: none;
  }

  .workflow-step {
    padding-top: 0;
  }

  .workflow-index {
    top: -6px;
  }
}

@media (max-width: 620px) {
  .workflow-track {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .workflow-card {
    min-height: 0;
  }
}

/* ============================================================================
   MENÚ HAMBURGUESA DE PANTALLA COMPLETA (v0.8.0)
   En móvil y tableta (≤1060px): botón de tres líneas sin caja (se vuelve X) y
   panel que cubre toda la pantalla en amarillo de marca, con enlaces grandes
   numerados, entrada escalonada y CTA de WhatsApp al fondo. El scroll de la
   página se bloquea mientras está abierto (html.tld-sin-scroll desde el JS).
   Las reglas usan `.site-header-v2 .mobile-nav-v2` (0,2,0) para ganarle al CSS
   base sin !important.
   ========================================================================= */

.nav-toggle {
  display: none;
}

@media (max-width: 1060px) {
  .site-header-v2 .header-inner-v2 {
    position: relative;
    z-index: 2;
    grid-template-columns: 1fr auto auto;
  }

  /* Header opaco en móvil: blur + sticky provoca saltos y "despegues" en
     Safari iOS, y el blur además crea problemas con el panel fijo. */
  .site-header {
    background: var(--background);
    backdrop-filter: none;
  }

  .nav-toggle {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 48px;
    height: 48px;
    margin-right: -10px;
    flex-shrink: 0;
    border-radius: 12px;
  }

  .nav-toggle:focus-visible {
    outline: 3px solid var(--brand-orange);
    outline-offset: 2px;
  }

  .nav-toggle-linea {
    display: block;
    width: 25px;
    height: 3px;
    border-radius: 3px;
    background: var(--brand-ink);
    transition: transform 240ms cubic-bezier(0.3, 0.7, 0.3, 1.2), opacity 140ms ease;
  }

  .nav-abierta .nav-toggle-linea:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
  }

  .nav-abierta .nav-toggle-linea:nth-child(2) {
    opacity: 0;
    transform: scaleX(0.4);
  }

  .nav-abierta .nav-toggle-linea:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
  }

  /* Panel de pantalla completa. El header (z2) queda visible encima. */
  .site-header-v2 .mobile-nav-v2 {
    position: fixed;
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: none;
    flex-direction: column;
    /* El CSS base centra y encoge los enlaces (align-items/justify-content
       de la tira vieja): aquí deben estirarse a todo el ancho. */
    align-items: stretch;
    justify-content: flex-start;
    overflow-y: auto;
    counter-reset: tld-nav;
    padding: 100px 26px calc(26px + env(safe-area-inset-bottom));
    background: var(--brand-yellow);
  }

  .site-header-v2.nav-abierta .mobile-nav-v2 {
    display: flex;
  }

  /* v1.1.0: los enlaces ahora vienen de wp_nav_menu() dentro de un <ul>, no
     como hijos directos de .mobile-nav-v2. El <ul> hereda el layout en
     columna (mismo flex, un nivel más adentro) y cada fila numerada vive en
     el <li>, no en el <a>: así el botón de submenú no rompe el contador. */
  .tld-menu-lista {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .site-header-v2 .tld-menu-lista > li {
    position: relative;
    padding: 19px 2px 19px 42px;
    border-bottom: 1.5px solid rgb(25 25 25 / 30%);
  }

  .site-header-v2 .tld-menu-lista > li > a {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: clamp(1.65rem, 7vw, 2.3rem);
    font-weight: 900;
    letter-spacing: -0.045em;
  }

  .site-header-v2 .tld-menu-lista > li::before {
    counter-increment: tld-nav;
    content: "0" counter(tld-nav);
    position: absolute;
    left: 2px;
    font-size: 0.7rem;
    font-weight: 820;
    letter-spacing: 0.08em;
    opacity: 0.55;
  }

  .site-header-v2 .tld-menu-lista > li > a::after {
    content: "\2197";
    margin-left: auto;
    font-size: 0.6em;
    opacity: 0.7;
  }

  /* Los items con submenú muestran el botón de despliegue en vez de la
     flecha "ir": son dos controles distintos, no el mismo gesto repetido. */
  .site-header-v2 .tld-menu-lista > li.menu-item-has-children > a::after {
    content: none;
  }

  .site-header-v2 .tld-menu-lista .submenu-toggle {
    display: flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    border: 1.5px solid var(--brand-ink);
    border-radius: 50%;
    background: rgb(255 255 255 / 55%);
    transition: transform 220ms ease, background-color 220ms ease;
  }

  .site-header-v2 .tld-menu-lista .submenu-toggle svg {
    width: 18px;
    height: 18px;
    transition: transform 220ms ease;
  }

  .site-header-v2 .tld-menu-lista .submenu-toggle[aria-expanded="true"] {
    background: var(--brand-ink);
    color: var(--brand-yellow);
  }

  .site-header-v2 .tld-menu-lista .submenu-toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
  }

  /* max-height, no grid-template-rows: con varios <li> como hijos directos,
     el truco de grid-template-rows: 0fr→1fr sólo colapsa la PRIMERA fila
     implícita (cada <li> genera la suya) y el resto del submenú se queda
     visible. max-height con un tope generoso no tiene ese problema. */
  .site-header-v2 .tld-menu-lista .sub-menu {
    overflow: hidden;
    max-height: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    transition: max-height 280ms ease;
  }

  .site-header-v2 .tld-menu-lista .submenu-toggle[aria-expanded="true"] ~ .sub-menu {
    max-height: 480px;
  }

  .site-header-v2 .tld-menu-lista .sub-menu > li > a {
    display: block;
    padding: 13px 0 13px 4px;
    font-size: 1.05rem;
    font-weight: 750;
    letter-spacing: -0.01em;
    opacity: 0.82;
  }

  .site-header-v2 .mobile-nav-v2 .mobile-nav-extra {
    display: grid;
    gap: 14px;
    margin-top: auto;
    padding-top: 30px;
  }

  .mobile-nav-extra .button {
    width: 100%;
    justify-content: center;
  }

  .mobile-nav-ciudad {
    justify-self: center;
    font-size: 0.74rem;
    font-weight: 820;
    opacity: 0.75;
  }

  /* Entrada escalonada de los enlaces al abrir. */
  .site-header-v2.nav-abierta .tld-menu-lista > li,
  .site-header-v2.nav-abierta .mobile-nav-extra {
    animation: tld-nav-entra 380ms cubic-bezier(0.2, 0.8, 0.3, 1) backwards;
  }

  .site-header-v2.nav-abierta .tld-menu-lista > li:nth-child(1) { animation-delay: 30ms; }
  .site-header-v2.nav-abierta .tld-menu-lista > li:nth-child(2) { animation-delay: 70ms; }
  .site-header-v2.nav-abierta .tld-menu-lista > li:nth-child(3) { animation-delay: 110ms; }
  .site-header-v2.nav-abierta .tld-menu-lista > li:nth-child(4) { animation-delay: 150ms; }
  .site-header-v2.nav-abierta .tld-menu-lista > li:nth-child(5) { animation-delay: 190ms; }
  .site-header-v2.nav-abierta .tld-menu-lista > li:nth-child(6) { animation-delay: 230ms; }
  .site-header-v2.nav-abierta .mobile-nav-extra { animation-delay: 270ms; }

  /* Sin la tira de navegación, el header es más bajo: ajustar el anclaje. */
  html {
    scroll-padding-top: 86px;
  }
}

@keyframes tld-nav-entra {
  from {
    opacity: 0;
    translate: 0 22px;
  }
}

/* Con el menú abierto, la página de atrás no se mueve. */
.tld-sin-scroll {
  overflow: hidden;
}

/* ============================================================================
   SUBMENÚ DE ESCRITORIO (v1.1.0)
   El enlace navega; el botón redondo despliega. Se abre con :hover, con
   :focus-within (teclado, sin JS) o al hacer clic/tap en el botón (clase
   .submenu-abierto, la pone dropdownMenu() en tld-tema.js). Mismo control
   funciona igual si el mouse deja de estar sobre el item.
   ========================================================================= */

.main-nav .submenu-toggle {
  display: inline-flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  margin-left: 3px;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

.main-nav .submenu-toggle svg {
  width: 15px;
  height: 15px;
  transition: transform 200ms ease;
}

.main-nav > li:hover .submenu-toggle svg,
.main-nav > li:focus-within .submenu-toggle svg,
.main-nav .submenu-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.main-nav .sub-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 40;
  display: grid;
  min-width: 210px;
  margin: 10px 0 0;
  padding: 9px;
  list-style: none;
  border: 1.5px solid var(--brand-ink);
  border-radius: 16px;
  background: white;
  box-shadow: 6px 7px 0 var(--brand-orange);
  opacity: 0;
  transform: translate(-50%, 6px);
  transition: opacity 200ms ease, transform 200ms ease;
  visibility: hidden;
}

/* Puente invisible sobre el margin-top: sin esto, el mouse "sale" del <li>
   al cruzar esos 10px camino al panel y :hover se apaga antes de llegar —
   el submenú se cerraba solo al intentar elegir un item. */
.main-nav .sub-menu::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  width: 100%;
  height: 10px;
}

.main-nav > li:hover > .sub-menu,
.main-nav > li:focus-within > .sub-menu,
.main-nav > li.submenu-abierto > .sub-menu {
  visibility: visible;
  opacity: 1;
  transform: translate(-50%, 0);
}

.main-nav .sub-menu > li > a {
  display: block;
  padding: 10px 14px;
  border-radius: 10px;
  color: var(--brand-ink);
  font-size: 0.85rem;
  font-weight: 750;
  white-space: nowrap;
}

.main-nav .sub-menu > li > a:hover,
.main-nav .sub-menu > li > a:focus-visible {
  background: var(--brand-cream);
}

/* En teléfono (≤600px) la barra de administración de WordPress es
   position:absolute: se va con el scroll pero dejaba al header pegajoso con
   su hueco de 46px (la regla body.admin-bar de arriba). En pantallas chicas
   la ocultamos por completo; los visitantes nunca la tienen y quien
   administra entra igual por /wp-admin. */
@media (max-width: 600px) {
  #wpadminbar {
    display: none !important;
  }

  html {
    margin-top: 0 !important;
  }

  body.admin-bar .site-header {
    top: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-toggle-linea {
    transition: none;
  }

  .site-header-v2.nav-abierta .tld-menu-lista > li,
  .site-header-v2.nav-abierta .mobile-nav-extra {
    animation: none;
  }

  .site-header-v2 .tld-menu-lista .sub-menu {
    transition: none;
  }

  .main-nav .sub-menu,
  .main-nav .submenu-toggle svg {
    transition: none;
  }
}

/* ============================================================================
   LIENZO DE REBOTE Y ZONA SEGURA (v0.7.9, ajustado en v0.8.0)
   En el celular, al pasar del final de la página el navegador "estira" y
   muestra el fondo del lienzo (html): se pinta del amarillo de marca para que
   se funda con el footer. El body conserva el crema, la página no cambia.
   Con viewport-fit=cover, el footer además rellena la zona segura del iPhone
   (la franja del home indicator) para que no quede banda clara al final.
   ========================================================================= */

html {
  background-color: var(--brand-yellow);
}

.site-footer {
  padding-bottom: env(safe-area-inset-bottom);
}

/* ============================================================================
   COMPARATIVA DE PLANES DE REDES (v0.8.1)
   Tabla estilo página de precios: los cuatro planes lado a lado, palomitas y
   rayas, columna de Movimiento destacada (es el plan con video, el que más
   conviene empujar). En pantallas chicas la tabla se desplaza horizontal con
   la primera columna pegajosa para no perder el renglón.
   ========================================================================= */

.screen-reader-text {
  position: absolute;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px;
  height: 1px;
  white-space: nowrap;
}

.comparison-section {
  background: white;
  border-top: 2px solid var(--brand-ink);
}

.comparison-scroll {
  overflow-x: auto;
  border: 2px solid var(--brand-ink);
  border-radius: 18px;
  background: white;
  -webkit-overflow-scrolling: touch;
}

.comparison-scroll:focus-visible {
  outline: 3px solid var(--brand-orange);
  outline-offset: 3px;
}

.comparison-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  font-size: 0.86rem;
}

.comparison-table th,
.comparison-table td {
  padding: 13px 16px;
  border-bottom: 1px solid rgb(25 25 25 / 12%);
  text-align: center;
  vertical-align: middle;
}

.comparison-table tbody tr:last-child th,
.comparison-table tbody tr:last-child td {
  border-bottom: 0;
}

/* Primera columna: el entregable. Pegajosa para el scroll horizontal. */
.comparison-table th[scope='row'],
.comparison-table thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 220px;
  max-width: 280px;
  background: white;
  box-shadow: 2px 0 0 rgb(25 25 25 / 8%);
  text-align: left;
  font-weight: 700;
}

.comparison-plan {
  min-width: 128px;
  padding-block: 18px;
}

.comparison-plan strong {
  display: block;
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: -0.03em;
}

.comparison-tag {
  display: inline-block;
  margin-bottom: 6px;
  border: 1.5px solid var(--brand-ink);
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 0.6rem;
  font-weight: 820;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: white;
}

.comparison-precio {
  display: block;
  margin-top: 4px;
  font-size: 0.78rem;
  font-weight: 800;
  color: #a63b1f;
}

/* La columna del plan con video se destaca: es el escalón que se empuja. */
.comparison-plan-destacado,
.comparison-col-destacada {
  background: rgb(253 199 31 / 18%);
}

.comparison-plan-destacado .comparison-tag {
  background: var(--brand-yellow);
}

.comparison-check {
  width: 20px;
  height: 20px;
  margin-inline: auto;
  stroke: #1d7a4f;
  stroke-width: 3;
}

.comparison-no {
  color: rgb(25 25 25 / 30%);
  font-weight: 700;
}

.comparison-footnote {
  margin-top: 14px;
  font-size: 0.78rem;
  color: #6c655b;
}

/* Nota de exclusiones en el resumen del cotizador. */
.bundle-exclusion-nota {
  opacity: 0.75;
}

@media (max-width: 700px) {
  .comparison-table {
    font-size: 0.8rem;
  }

  .comparison-table th[scope='row'],
  .comparison-table thead th:first-child {
    min-width: 160px;
    max-width: 190px;
  }
}

/* ============================================================================
   INTERVENCIÓN DE COPY EN LA HOME (v0.8.2)
   Sólo acomodo del copy nuevo: intro de la sección de categorías, línea de
   servicios y nota en las tarjetas, y el enlace secundario al catálogo PDF en
   el bloque de contacto (fondo oscuro). Nada de rediseño.
   ========================================================================= */

.category-showcase-intro {
  max-width: 560px;
  margin: 16px auto 0;
  color: #6c655b;
  font-size: 0.98rem;
  line-height: 1.6;
}

@media (max-width: 860px) {
  .category-showcase-intro {
    margin-inline: 0;
  }
}

.category-service-line {
  margin-top: 12px;
  color: #6c655b;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.category-service-nota {
  margin-top: 8px;
  color: #6c655b;
  font-size: 0.82rem;
  font-style: italic;
}

/* Enlace secundario al catálogo: visible pero por debajo de WhatsApp y el
   cotizador. Vive en el panel oscuro de contacto de la portada. */
.contact-catalog-line {
  max-width: 440px;
  margin: 14px 0 0;
  color: rgb(255 255 255 / 78%);
  font-size: 0.9rem;
  line-height: 1.55;
}

.contact-catalog-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  border-bottom: 2px solid rgb(255 255 255 / 25%);
  color: var(--brand-yellow);
  font-size: 0.85rem;
  font-weight: 800;
  text-decoration: none;
}

.contact-catalog-link:hover,
.contact-catalog-link:focus-visible {
  border-bottom-color: var(--brand-yellow);
}

.contact-catalog-link svg {
  width: 14px;
}

/* ============================================================================
   v0.9.0 — SERVICIOS + COTIZADOR: arquitectura comercial y bugs visuales
   ========================================================================= */

/* --- P1: CTA de tarjeta siempre al fondo Y con separación mínima constante.
   Las tarjetas ya eran flex-column con margin-top:auto en el botón, pero
   cuando el contenido llenaba la tarjeta el auto se volvía 0 y el botón
   quedaba pegado. El elemento anterior al botón —sea lista, nota o acordeón—
   garantiza el aire. Solución sistémica: aplica a todas las tarjetas. */
.catalog-card > :nth-last-child(2),
.bundle-card > :nth-last-child(2) {
  margin-bottom: 22px;
}

/* --- P9: «Considera» como microcopy, no como bloque. Una advertencia de una
   línea no necesita rectángulo: texto pequeño, sin caja ni borde. Se usa igual
   en el resumen del cotizador y en las notas bajo las tarjetas. */
.tld-nota-considera {
  margin: 10px 0 0;
  padding: 0;
  border: 0;
  color: #6d655b;
  font-size: 0.78rem;
  line-height: 1.5;
}

.tld-nota-considera strong {
  color: var(--brand-ink);
  font-weight: 850;
}

/* --- P10: un solo acordeón de condiciones generales, cerrado por defecto. */
.conditions-toggle {
  display: flex;
  width: 100%;
  min-height: 64px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 0;
  border-block: 2px solid var(--brand-ink);
  background: none;
  padding: 18px 2px;
  color: var(--brand-ink);
  font: inherit;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  text-align: left;
  cursor: pointer;
}

.conditions-toggle:focus-visible {
  outline: 3px solid var(--brand-orange);
  outline-offset: 3px;
}

.conditions-toggle-icon::before {
  content: '+';
  font-size: 1.35rem;
  font-weight: 800;
}

.conditions-toggle[aria-expanded='true'] .conditions-toggle-icon::before {
  content: '\2212';
}

.conditions-body {
  border-bottom: 1.5px solid rgb(25 25 25 / 22%);
  padding: 20px 2px 26px;
  color: #5d574e;
  font-size: 0.94rem;
  line-height: 1.62;
}

.conditions-body ol {
  display: grid;
  margin: 0;
  padding-left: 22px;
  gap: 11px;
}

/* --- P11: pasos del cotizador, como cinta compacta. */
.quote-steps {
  display: grid;
  margin: 0 0 26px;
  padding: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  list-style: none;
  counter-reset: none;
}

.quote-steps li {
  display: grid;
  gap: 3px;
  border-left: 3px solid var(--brand-yellow);
  padding-left: 12px;
}

.quote-steps strong {
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.quote-steps span {
  color: #5d574e;
  font-size: 0.82rem;
  line-height: 1.45;
}

@media (max-width: 700px) {
  .quote-steps {
    grid-template-columns: 1fr;
  }
}

/* --- P11: cierre del estimado. La pregunta es el gancho; el microcopy quita
   el miedo a «comprar sin querer». Vive dentro del panel negro. */
.quote-close {
  margin-top: 22px;
  border-top: 1px solid rgb(255 255 255 / 18%);
  padding-top: 18px;
}

.quote-close p {
  margin: 0;
  color: rgb(255 255 255 / 70%);
  font-size: 0.8rem;
  line-height: 1.5;
}

.quote-close-lead {
  color: white !important;
  font-size: 0.95rem !important;
  font-weight: 850;
}

.quote-close .result-button {
  margin-top: 16px;
}

.quote-close-micro {
  margin-top: 9px !important;
  text-align: center;
  font-size: 0.72rem !important;
  color: rgb(255 255 255 / 55%) !important;
}

/* --- P13: cabecera de Paquetes en negro para separarla de la rejilla
   amarilla. Mismo lenguaje que las demás franjas oscuras del sitio. */
.all-bundles-intro {
  border-top: 2px solid var(--brand-ink);
  background: var(--brand-ink);
  color: white;
  padding-block: clamp(44px, 7vw, 72px);
}

.all-bundles-intro h2 {
  max-width: 900px;
  margin: 10px 0 0;
  font-size: clamp(2.4rem, 5vw, 4.6rem);
  font-weight: 930;
  letter-spacing: -0.06em;
  line-height: 0.98;
}

.all-bundles-intro p:not(.kicker) {
  max-width: 640px;
  margin: 20px 0 0;
  color: rgb(255 255 255 / 74%);
  line-height: 1.6;
}

/* --- P13: la fecha de precios como microcopy bajo el botón del hero, no como
   tarjeta que compite con el título. */
.page-hero-aside-lean {
  border: 0;
  background: none;
  padding: 0;
  box-shadow: none;
  justify-content: center;
}

.pricing-microcopy {
  max-width: 300px;
  margin: 14px 0 0;
  color: #6d655b;
  font-size: 0.74rem;
  line-height: 1.5;
}

/* --- P14: plataformas que explican una categoría (sólo Contenido y Presencia
   digital). Chips discretos, sin repetirse en cada tarjeta. */
.category-platforms {
  display: flex;
  margin: 0 0 18px;
  padding: 0;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
}

.category-platforms li {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 7px;
  border: 1px solid rgb(25 25 25 / 25%);
  border-radius: 999px;
  background: white;
  padding: 5px 12px 5px 8px;
  font-size: 0.76rem;
  font-weight: 800;
}

.category-platforms img,
.category-platforms svg {
  width: 18px;
  height: 18px;
}

/* ============================================================
   v0.9.1 — HERO OSCURO DE /paquetes/
   La página propia de Paquetes usaba el .page-hero estándar
   (amarillo) seguido de .all-bundles-section (también amarilla):
   dos bloques amarillos pegados. Este modificador replica la
   lógica visual de la franja negra de /servicios/
   (.all-bundles-intro): fondo tinta, titular blanco, texto
   secundario claro y eyebrow con acento amarillo. La sección
   siguiente permanece amarilla: NEGRO ↓ AMARILLO.
   ============================================================ */

.page-hero-dark {
  background: var(--brand-ink);
  color: white;
}

.page-hero-dark .eyebrow {
  border-color: rgb(255 255 255 / 26%);
  background: rgb(255 255 255 / 8%);
  color: var(--brand-yellow);
}

.page-hero-dark .page-hero-grid > div:first-child > p:last-child {
  color: rgb(255 255 255 / 74%);
}

.page-hero-dark .pricing-microcopy {
  color: rgb(255 255 255 / 62%);
}

/* ============================================================
   COTIZADOR — hero compacto (v1.1.0)
   El objetivo de la página es cotizar: el hero deja de vender y
   se acorta para que el formulario empiece casi de inmediato.
   ============================================================ */
.calculator-page-hero-compact {
  padding-block: clamp(34px, 4.5vw, 54px);
}

.calculator-page-hero-compact h1 {
  max-width: 700px;
  font-size: clamp(2.35rem, 4.6vw, 3.6rem);
}

.calculator-page-hero-compact .page-hero-grid-full > div > p:last-child {
  max-width: 560px;
  margin: 14px 0 0;
  font-size: 1.05rem;
}

.quote-privacy-microcopy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 18px 0 0;
  color: #4b4640;
  font-size: 0.85rem;
  font-weight: 700;
}

.quote-privacy-microcopy svg {
  width: 18px;
  height: 18px;
  color: #137a4f;
}

/* ============================================================
   PROYECTOS — v1.0.1
   /proyectos/ es el portafolio. La cinta de clientes en home sale
   de los mismos registros. Reutiliza tokens y componentes ya
   existentes (.button, .kicker, .eyebrow, .service-tag,
   .media-placeholder, .page-hero*, .section-heading).
   ============================================================ */

/* --- Hero de /proyectos/ y CTA final del single: una sola columna. --- */
.page-hero-grid-full {
  grid-template-columns: 1fr;
}

.page-hero-grid-full > div {
  max-width: 900px;
}

.final-cta-grid-full {
  grid-template-columns: 1fr;
}

.final-cta-grid-full > div {
  max-width: 640px;
}

/* --- Hero compacto de /proyectos/: sólo el título, fondo amarillo. --- */
.projects-archive-hero {
  border-bottom: 2px solid var(--brand-ink);
  background: var(--brand-yellow);
  padding-block: clamp(50px, 8vw, 84px);
  text-align: center;
}

.projects-archive-hero h1 {
  max-width: none;
  margin: 0;
  font-size: clamp(3.8rem, 11vw, 8rem);
  font-style: italic;
  font-weight: 950;
  letter-spacing: -0.05em;
  line-height: 0.88;
  text-wrap: balance;
}

/* --- Filtros por disciplina (archivo de proyectos): pequeños y secundarios,
   no deben competir con la galería. --- */
.project-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 40px;
}

.project-filter-chip {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  border: 1px solid rgb(25 25 25 / 40%);
  border-radius: 999px;
  background: transparent;
  padding: 0 13px;
  color: #585249;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}

.project-filter-chip:hover {
  border-color: var(--brand-ink);
  color: var(--brand-ink);
}

.project-filter-chip:focus-visible {
  outline: 3px solid var(--brand-orange);
  outline-offset: 2px;
}

.project-filter-chip[aria-pressed="true"] {
  border-color: var(--brand-ink);
  background: var(--brand-ink);
  color: white;
}

.projects-archive-vacio,
.project-filters-vacio {
  margin: 0;
  padding: 46px 0;
  color: #585249;
  font-size: 1.05rem;
  text-align: center;
}

/* --- "Proyectos" en home: fondo amarillo, título solo, sin discurso. --- */
.featured-projects-section {
  border-top: 2px solid var(--brand-ink);
  border-bottom: 2px solid var(--brand-ink);
  background: var(--brand-yellow);
}

.featured-projects-title {
  margin: 0 0 clamp(36px, 6vw, 60px);
  color: var(--brand-ink);
  font-size: clamp(3.2rem, 8vw, 6.4rem);
  font-style: italic;
  font-weight: 950;
  letter-spacing: -0.05em;
  text-align: center;
  text-wrap: balance;
}

.section-action-row-centrada {
  justify-content: center;
}

/* --- Rejilla y tarjeta de proyecto: imagen + nombre y nada más. La
   tarjeta ES el enlace (toda ella, no una capa aparte) para que el tap
   completo abra el proyecto en touch sin depender del hover. --- */
.project-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.project-card {
  display: block;
  overflow: hidden;
  border: 1.5px solid rgb(25 25 25 / 26%);
  border-radius: 21px;
  background: white;
  box-shadow: 5px 6px 0 rgb(25 25 25 / 12%);
  transition: transform 280ms ease, box-shadow 280ms ease;
}

.project-card:hover,
.project-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 8px 9px 0 rgb(25 25 25 / 18%);
}

.project-card:focus-visible {
  outline: 3px solid var(--brand-orange);
  outline-offset: 3px;
}

.project-card-media {
  position: relative;
  display: block;
}

.project-card-media .media-placeholder {
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.project-card-media .media-placeholder img {
  transition: transform 320ms ease;
}

.project-card:hover .project-card-media img,
.project-card:focus-visible .project-card-media img {
  transform: scale(1.05);
}

.project-card-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(25 25 25 / 0%);
  transition: background-color 280ms ease;
}

.project-card:hover .project-card-overlay,
.project-card:focus-visible .project-card-overlay {
  background: rgb(25 25 25 / 52%);
}

.project-card-boton {
  display: flex;
  width: 56px;
  height: 56px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--brand-yellow);
  color: var(--brand-ink);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 250ms ease, transform 250ms ease;
}

.project-card-boton svg {
  width: 24px;
  height: 24px;
}

.project-card:hover .project-card-boton,
.project-card:focus-visible .project-card-boton {
  opacity: 1;
  transform: scale(1);
}

.project-card-nombre {
  display: block;
  padding: 18px 20px 20px;
  color: var(--brand-ink);
  font-size: clamp(1.2rem, 2vw, 1.45rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

/* ============================================================
   SINGLE DE PROYECTO — v1.3.0
   Full width, dos columnas desde 1080px: galería protagonista (izquierda,
   ~68-72%) + sidebar editorial (derecha, ~28-32%, sticky con scroll propio).
   Por debajo de 1080px, una sola columna en el orden real del documento:
   header → galería → sobre el proyecto → compartir → cotizar → navegación
   → CTA final. La galería domina; el texto acompaña.
   ============================================================ */

.project-single {
  overflow-x: hidden;
  overflow-x: clip; /* progressive enhancement; la línea de arriba es el respaldo */
}

/* Contenedor ancho: casi todo el viewport, con un tope para que el texto
   del sidebar no estire sus líneas a un ancho absurdo en monitores 4K+. */
.project-full-width {
  width: 100%;
  max-width: 1800px;
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 56px);
}

/* --- Encabezado compacto: título domina, nada de eyebrow gigante. --- */
.project-header-compacto {
  padding-block: clamp(34px, 5vw, 56px) clamp(22px, 4vw, 38px);
}

.project-header-logo {
  display: block;
  width: auto;
  max-width: 150px;
  height: 42px;
  margin: 0 0 14px;
  object-fit: contain;
  object-position: left center;
}

.project-header-compacto h1 {
  max-width: 900px;
  margin: 0 0 10px;
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 930;
  letter-spacing: -0.05em;
  line-height: 1;
}

.project-header-resumen {
  max-width: 640px;
  margin: 0 0 12px;
  font-size: 1.05rem;
  line-height: 1.55;
}

.project-header-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  color: #6b6459;
  font-size: 0.8rem;
  font-weight: 700;
}

.project-header-meta a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #a63b1f;
  font-weight: 800;
}

/* --- Layout de dos columnas. Una sola columna (flex, orden natural del
   documento) hasta 1080px: por debajo, minmax(280px, .9fr) del sidebar
   empieza a apretarse por debajo de los ~280-300px que necesita para no
   verse aplastado, así que ahí se prefiere apilar completo. --- */
.project-layout {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 5vw, 56px);
  padding-block: 0 clamp(40px, 6vw, 64px);
}

.project-gallery-col,
.project-sidebar {
  min-width: 0; /* que el texto/imágenes puedan encogerse dentro del grid */
}

/* --- Galería editorial: vive en su propia columna, no en el viewport
   completo. Cada imagen respeta su proporción (height:auto, sin recorte).
   "Full" ya no rompe el layout (100vw): ahora es 100% de ESTA columna. --- */
.project-gallery-track {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vw, 34px);
}

.project-gallery-item {
  margin: 0;
}

.project-gallery-item img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
}

.project-gallery-item-full {
  width: 100%;
}

.project-gallery-item-normal {
  width: 94%;
  margin-inline: auto;
}

.project-gallery-item-medio {
  width: 62%;
  margin-inline: auto;
}

.project-gallery-row-doble {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 24px);
  width: 100%;
}

/* --- Sidebar editorial: una sola ficha, no cinco rectángulos. --- */
.project-sidebar-sticky {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.project-about {
  border: 2px solid var(--brand-ink);
  border-radius: 20px;
  background: var(--brand-cream);
  box-shadow: 6px 7px 0 var(--brand-orange);
  padding: 26px;
}

.project-about h2 {
  margin: 0 0 18px;
  font-size: 1.4rem;
  font-weight: 930;
  letter-spacing: -0.03em;
}

.project-about-campo {
  margin: 0 0 18px;
  padding-top: 16px;
  border-top: 1px solid rgb(25 25 25 / 14%);
}

.project-about-campo:first-of-type {
  padding-top: 0;
  border-top: 0;
}

.project-about-campo:last-child {
  margin-bottom: 0;
}

.project-about-campo strong {
  display: block;
  margin-bottom: 5px;
  color: #a63b1f;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.project-about-campo p {
  margin: 0;
  color: #302c26;
  font-size: 0.94rem;
  line-height: 1.6;
}

/* Piezas realizadas: lista editorial, no una nube de chips. */
.project-piezas-lista {
  display: grid;
  margin: 0;
  padding: 0;
  gap: 8px;
  list-style: none;
}

.project-piezas-lista li {
  position: relative;
  padding-left: 16px;
  color: #302c26;
  font-size: 0.92rem;
  font-weight: 700;
}

.project-piezas-lista li::before {
  position: absolute;
  left: 0;
  color: #a63b1f;
  content: "—";
}

/* Compartir. */
.project-share-label {
  margin: 0 0 10px;
  color: #6b6459;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.project-share-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.project-share-boton {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  gap: 6px;
  border: 1.5px solid var(--brand-ink);
  border-radius: 999px;
  background: white;
  padding: 0 14px;
  color: var(--brand-ink);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease, transform 180ms ease;
}

.project-share-boton:hover {
  transform: translateY(-2px);
}

.project-share-boton:focus-visible {
  outline: 3px solid var(--brand-orange);
  outline-offset: 2px;
}

.project-share-boton svg {
  width: 16px;
  height: 16px;
}

.project-share-boton[data-copiado] {
  background: var(--brand-ink);
  color: white;
}

.project-share-boton-icono {
  width: 38px;
  justify-content: center;
  padding: 0;
}

.project-share-boton-icono img {
  width: 16px;
  height: 16px;
}

/* CTA pequeño del sidebar: siempre accesible, distinto del cierre final. */
.project-sidebar-cta {
  padding-top: 22px;
  border-top: 1.5px solid rgb(25 25 25 / 16%);
}

.project-sidebar-cta .kicker {
  margin-bottom: 12px;
}

.project-sidebar-cta .button {
  width: 100%;
  justify-content: center;
}

/* --- Navegación entre proyectos: ancho completo, fuera del sidebar. --- */
.project-neighbors {
  border-top: 1.5px solid rgb(25 25 25 / 16%);
  padding-block: 28px;
}

.project-neighbors-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 20px;
}

.project-neighbor-link {
  display: flex;
  max-width: 34%;
  align-items: center;
  gap: 8px;
  color: var(--brand-ink);
  font-size: 0.92rem;
  font-weight: 800;
}

.project-neighbor-link span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-neighbor-link svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transform: scaleX(-1); /* la flecha "siguiente" apunta a la derecha; aquí se invierte para "anterior". */
}

.project-neighbor-siguiente {
  margin-left: auto;
  flex-direction: row-reverse;
  text-align: right;
}

.project-neighbor-siguiente svg {
  transform: none;
}

.project-neighbor-todos {
  color: #6b6459;
  font-size: 0.85rem;
  font-weight: 700;
}

/* --- CTA final: cierre editorial, distinto del CTA pequeño del sidebar
   (ese es "siempre accesible"; este es "ya viste todo, aquí está el cierre"). --- */
.project-cta-final {
  border-top: 2px solid var(--brand-ink);
  background: var(--brand-ink);
  color: white;
}

.project-cta-final-inner {
  padding-block: clamp(50px, 7vw, 80px);
  text-align: center;
}

.project-cta-final .kicker-yellow {
  justify-content: center;
}

.project-cta-final .kicker-yellow::before {
  display: none;
}

.project-cta-final h2 {
  max-width: 720px;
  margin: 0 auto 26px;
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  font-style: italic;
  font-weight: 930;
  letter-spacing: -0.04em;
}

/* --- Desde 1080px: dos columnas reales + sidebar sticky con scroll propio. --- */
@media (min-width: 1080px) {
  .project-layout {
    display: grid;
    grid-template-columns: minmax(0, 2.1fr) minmax(280px, 0.9fr);
    align-items: start;
    gap: clamp(40px, 4vw, 64px);
  }

  .project-sidebar-sticky {
    position: sticky;
    top: 96px;
    /* Si el contenido del sidebar es más alto que el hueco disponible bajo
       el header, este scrollea DENTRO de sí mismo — nunca queda contenido
       inaccesible ni tapa el pie de la página. */
    max-height: calc(100dvh - 116px);
    overflow-y: auto;
    padding-right: 4px;
  }
}

@media (max-width: 700px) {
  .project-gallery-row-doble {
    grid-template-columns: 1fr;
  }
}

/* --- Franja de logos de marcas (home): compacta, sale de Proyectos
   publicados. Track scroll-snap nativo (arrastre/rueda/swipe); sin
   autoplay — ver nota en tld_home_clientes(). --- */
.clients-strip {
  padding-block: clamp(40px, 6vw, 64px);
}

.clients-strip-shell {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.clients-strip-label {
  margin: 0;
  color: #585249;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

.clients-strip-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.clients-strip-flecha {
  display: flex;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--brand-ink);
  border-radius: 50%;
  background: white;
  color: var(--brand-ink);
  cursor: pointer;
  transform: scaleX(-1);
  transition: background-color 180ms ease;
}

.clients-strip-flecha-siguiente {
  transform: none;
}

.clients-strip-flecha svg {
  width: 17px;
  height: 17px;
}

.clients-strip-flecha:hover {
  background: var(--brand-cream);
}

.clients-strip-flecha:focus-visible {
  outline: 3px solid var(--brand-orange);
  outline-offset: 2px;
}

.clients-grid {
  display: flex;
  flex: 1;
  gap: 16px;
  overflow-x: auto;
  padding-block: 4px;
  scroll-padding-inline: 4px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.clients-grid::-webkit-scrollbar {
  display: none;
}

.client-logo {
  display: flex;
  flex: 0 0 auto;
  width: 148px;
  height: 92px;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgb(25 25 25 / 26%);
  border-radius: 16px;
  background: white;
  padding: 16px;
  scroll-snap-align: start;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

a.client-logo:hover {
  transform: translateY(-2px);
  box-shadow: 4px 5px 0 rgb(25 25 25 / 12%);
}

a.client-logo:focus-visible {
  outline: 3px solid var(--brand-orange);
  outline-offset: 3px;
}

.client-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

@media (max-width: 1120px) {
  .project-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .project-gallery-row-doble {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .project-grid {
    grid-template-columns: 1fr;
  }

  .project-neighbors-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .project-neighbor-link,
  .project-neighbor-siguiente {
    max-width: 100%;
    margin-left: 0;
  }

  .project-neighbor-todos {
    order: 3;
  }

  .project-cta-simple {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 620px) {
  .clients-strip-flecha {
    display: none;
  }
}

@media (max-width: 360px) {
  .client-logo {
    width: 128px;
    height: 80px;
  }
}

/* ============================================================
   TESTIMONIOS — v1.1.0
   Escena editorial en negro: nada que ver con las tarjetas de
   Proyectos ni con la rejilla de Servicios. Comillas gigantes como
   elemento gráfico, tarjeta crema desplazada y superpuesta, acento
   amarillo. Si hay varios, carrusel manual sin autoplay: un
   testimonio pide tiempo de lectura, no una cuenta regresiva.
   ============================================================ */
.testimonials-section {
  border-top: 2px solid var(--brand-ink);
  border-bottom: 2px solid var(--brand-ink);
  background: var(--brand-ink);
  color: white;
}

.testimonials-shell {
  max-width: 880px;
}

.testimonials-section .kicker-yellow {
  justify-content: center;
  text-align: center;
}

.testimonials-section .kicker-yellow::before {
  display: none;
}

.testimonial-slide {
  display: grid;
  gap: 8px;
}

.testimonial-quote-mark {
  display: block;
  margin: 0 0 -0.15em;
  color: var(--brand-yellow);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(6rem, 14vw, 11rem);
  font-style: italic;
  line-height: 1;
}

.testimonial-quote {
  margin: 0;
  font-size: clamp(1.5rem, 3.4vw, 2.6rem);
  font-style: italic;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.32;
}

.testimonial-quote p {
  margin: 0 0 0.6em;
}

.testimonial-quote p:last-child {
  margin-bottom: 0;
}

.testimonial-card {
  display: flex;
  align-items: center;
  gap: 16px;
  width: fit-content;
  margin: -18px 0 0 clamp(16px, 6vw, 64px);
  padding: 16px 24px 16px 16px;
  border: 2px solid var(--brand-yellow);
  border-radius: 18px;
  background: var(--brand-cream);
  color: var(--brand-ink);
  box-shadow: 6px 7px 0 var(--brand-orange);
}

.testimonial-photo {
  overflow: hidden;
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  border: 2px solid var(--brand-ink);
  border-radius: 50%;
}

.testimonial-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.testimonial-firma {
  display: grid;
  gap: 2px;
}

.testimonial-firma strong {
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: -0.01em;
}

.testimonial-firma span {
  color: #585249;
  font-size: 0.82rem;
}

.testimonials-controles {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 44px;
}

.testimonials-flecha {
  display: flex;
  width: 52px;
  height: 52px;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--brand-yellow);
  border-radius: 50%;
  background: transparent;
  color: var(--brand-yellow);
  cursor: pointer;
  transform: scaleX(-1);
  transition: background-color 200ms ease, color 200ms ease;
}

.testimonials-flecha-siguiente {
  transform: none;
}

.testimonials-flecha svg {
  width: 20px;
  height: 20px;
}

.testimonials-flecha:hover {
  background: var(--brand-yellow);
  color: var(--brand-ink);
}

.testimonials-flecha:focus-visible {
  outline: 3px solid var(--brand-orange);
  outline-offset: 3px;
}

@media (max-width: 620px) {
  .testimonial-card {
    width: auto;
    margin: 16px 0 0;
    padding: 14px 18px 14px 14px;
  }

  .testimonial-quote-mark {
    font-size: clamp(4.5rem, 20vw, 7rem);
  }
}