/* ==========================================================================
   CAPA MÓVIL — Guild System IA
   ==========================================================================

   QUÉ ES
   La única hoja del proyecto pensada para teléfonos. Las demás son
   escritorio-primero: home-v3.css (60 kB) no tenía NI UN corte por debajo de
   1100 px, y responsive.css cubría la estructura antigua, no la home v3.

   POR QUÉ UNA HOJA APARTE Y NO PARCHES REPARTIDOS
   Va la última en el orden de carga, así que gana por orden y NO necesita
   !important. Eso permite corregir sin tocar el escritorio: cada regla vive
   dentro de un @media de ancho máximo y no existe por encima de 767 px.

   REGLA DE ORO
   Nada aquí puede alterar el escritorio. Si una regla necesita salir de un
   @media (max-width), es que no pertenece a esta hoja.

   CÓMO SE DECIDIÓ QUÉ TOCAR
   Nada por intuición. Todo sale de medir el estilo calculado en WebKit con
   tools/audit-mobile.mjs, en 16 rutas y 6 viewports. Los números citados en
   los comentarios son de esa medición a 390×844 antes de esta hoja.

   ORDEN
   1. Base del documento (iOS, zoom, áreas seguras)
   2. Densidad de secciones
   3. Imágenes acotadas
   4. Controles táctiles
   5. Precios
   6. Perfil y fundador
   ========================================================================== */

/* ==========================================================================
   1. BASE DEL DOCUMENTO
   Fuera de @media: son correcciones de comportamiento, no de maquetación, y
   deben valer también en escritorio.
   ========================================================================== */

html {
  /* Safari aumenta por su cuenta el texto al girar el teléfono si no se le
     dice lo contrario. No desactiva el zoom del usuario: solo el reajuste
     automático. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/*
 * Safari hace zoom al enfocar un campo cuyo texto mida menos de 16 px, y
 * después NO devuelve la página a su escala. Se evita en el origen: 16 px
 * mínimos en todo control de formulario.
 */
input,
select,
textarea {
  font-size: max(16px, 1rem);
}

/* Un hijo de grid/flex no encoge por debajo de su contenido salvo que se le
   diga. Es la causa habitual de desbordes horizontales en móvil. */
@media (max-width: 767px) {
  .section-shell > *,
  .hero-v3__grid > *,
  .pricing-panel > *,
  .lab-grid > * {
    min-width: 0;
  }
}

/* ==========================================================================
   2. DENSIDAD DE SECCIONES
   Medido: la home ocupaba 38,8 pantallas a 390×844, con secciones de 64 px de
   relleno arriba y abajo. Se recorta el aire, no el contenido.
   ========================================================================== */

/* --- Escala tipográfica móvil ---
   Se corrigen los SUELOS de los clamp, que estaban pensados para escritorio:
   por debajo de 430 px el término en vw es tan pequeño que gana siempre el
   mínimo, así que un clamp(2rem, 4vw, 3.5rem) es en realidad "32 px fijos".
   Bajar el suelo NO toca el escritorio: allí manda el máximo. */
@media (max-width: 767px) {
  .hero-v3 h1 {
    font-size: clamp(1.9rem, 8.6vw, 2.375rem);  /* tope 38 px */
    line-height: 1.04;
  }

  /*
   * Los h2 se fijan en varios sitios con selectores más específicos que un
   * `h2` suelto: .section-header h2 (global.css), .home-v3 main
   * .section-header h2 y .home-v3-projects .section-header h2 (home-v3.css).
   * Con un selector corto esta capa NO ganaba y el validador seguía midiendo
   * 32 px. Se replica la especificidad de cada origen.
   */
  h2,
  .section-header h2,
  .home-v3 main .section-header h2,
  .home-v3-projects .section-header h2,
  .home-v3 .trust-v3__header h2,
  /* Identificado con CDP (CSS.getMatchedStylesForNode), no a ciegas: la regla
     ganadora era home-v3.css línea 49, cuyo tercer selector es
     `.home-v3 .enterprise-v3__header h2` (0,2,1). Faltaba justo ese y por eso
     «Sistemas empresariales a medida» seguía a 32 px. */
  .home-v3 .enterprise-v3__header h2,
  .contact-v3__intro h2,
  .launch-promo__title,
  .lab-teaser h2 {
    font-size: clamp(1.5rem, 7vw, 1.9375rem);   /* tope 31 px */
    line-height: 1.1;
  }

  h3 { font-size: clamp(1.1875rem, 5.4vw, 1.4375rem); }  /* tope 23 px */

  .hero-v3__description,
  .section-header > p,
  .trust-v3__header > p {
    font-size: 1rem;
    line-height: 1.5;
  }
}

@media (max-width: 359px) {
  .hero-v3 h1 { font-size: 1.9375rem; }   /* 31 px */
  h2, .launch-promo__title { font-size: 1.5625rem; }  /* 25 px */
  h3 { font-size: 1.1875rem; }            /* 19 px */
}

@media (max-width: 767px) {
  /*
   * Header: medido 76 px, presupuesto 62–68. La altura sale del token
   * --navbar-height, que también usa el menú desplegable para colocarse justo
   * debajo (inset: var(--navbar-height) 0 0 0 en responsive.css). Se cambia el
   * token y no la caja, para que header y menú sigan cuadrando.
   */
  :root { --navbar-height: 66px; }

  .navbar { padding-inline: 17px; }
  .navbar-brand img { width: 38px; height: 38px; }
  .navbar-brand-word { font-size: 1.25rem; }
  .nav-toggle { width: 42px; height: 42px; }

  /* Con header pegajoso, las anclas deben parar por debajo de él. */
  :target,
  section[id] { scroll-margin-top: calc(var(--navbar-height) + 12px); }

  /* Robot: medido 300 px, presupuesto 280. */
  .hero-v3__robot {
    height: clamp(240px, 66vw, 280px);
    max-height: 280px;
  }

  .section {
    padding-block: 48px;
  }

  /* Separación entre la cabecera de sección y su contenido: iba con el ritmo
     de escritorio y dejaba huecos de más de 100 px. */
  .section-header,
  .trust-v3__header,
  .enterprise-v3__header {
    margin-bottom: 22px;
  }

  .section-header > p,
  .trust-v3__header > p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .section-shell,
  .hero-v3__shell {
    padding-inline: max(20px, env(safe-area-inset-left), env(safe-area-inset-right));
  }

  /* El hero ya reserva su propio alto; el relleno extra solo lo alarga. */
  .hero-v3 {
    padding-block: 32px 40px;
  }
}

@media (max-width: 390px) {
  .section {
    padding-block: 44px;
  }
}

/* ==========================================================================
   3. IMÁGENES ACOTADAS
   Ninguna imagen debe ocupar una pantalla entera por sí sola.
   ========================================================================== */

@media (max-width: 767px) {
  /*
   * Portadas de proyecto. Medido en las fichas de caso: 753 px de alto sobre
   * un viewport de 844, el 89 %. La captura es 1280×800 y se dejaba a su
   * proporción natural sobre el ancho completo. Se recorta por arriba, que es
   * donde está la cabecera de la interfaz mostrada.
   */
  .live-case-visual img,
  .live-project-card__media img,
  .project-card-mockup img {
    width: 100%;
    height: auto;
    max-height: 260px;
    object-fit: cover;
    object-position: top center;
  }

  /*
   * Retrato del fundador. Medido: 477 px. Es la foto principal y debe seguir
   * viéndose bien, así que se acota sin llegar a los 240 px que se piden para
   * las imágenes secundarias.
   */
  .specialist-v3__photo img {
    max-height: 340px;
  }

  /* Entorno de trabajo y evidencias: son secundarias, van al límite bajo. */
  .specialist-evidence img,
  .specialist-workspace img,
  .evidence-card img {
    width: 100%;
    max-height: 240px;
    object-fit: cover;
  }
}

/* ==========================================================================
   4. CONTROLES TÁCTILES
   Objetivo: entre 46 y 54 px de alto, sin pasar de 58.
   ========================================================================== */

@media (max-width: 767px) {
  /*
   * Medido: .pricing-external__toggle llegaba a 70 px porque su etiqueta
   * ocupa dos líneas. Se compacta el relleno y se deja respirar al texto.
   */
  .pricing-external__toggle {
    min-height: 48px;
    padding-block: 10px;
    line-height: 1.25;
    text-align: left;
  }

  .btn,
  a.btn,
  button.btn {
    min-height: 46px;
  }

  /*
   * CTA de plan a 71 px por debajo de 375 px: «Cotizar sistema de reservas»
   * no cabe en una línea y el relleno vertical de escritorio se suma a las
   * dos líneas. Se recorta el relleno y se ajusta el interlineado para que
   * dos líneas quepan dentro del límite de 58 px.
   */
  .pricing-plan .btn,
  .pricing-plan__cta,
  .plan-card .btn {
    padding-block: 11px;
    line-height: 1.2;
    font-size: 0.95rem;
  }
}

@media (max-width: 360px) {
  /* A 320–360 px hasta los rótulos cortos se parten: se aprieta un punto más
     el tipo, sin bajar de los 15 px que exige el encargo. */
  .pricing-plan .btn,
  .pricing-plan__cta,
  .plan-card .btn {
    font-size: 0.9375rem;
    padding-block: 10px;
  }
}

/* ==========================================================================
   5. PRECIOS
   Medido: #planes ocupaba 10,5 pantallas (8867 px) en la home, y la página
   /precios/ 11,9 en total. La comparativa sola eran 4,1 pantallas SIEMPRE
   abiertas. Ahora se pliega (pricing.js crea el <details> cerrado bajo
   768 px) y aquí se le da forma de control, no de tabla suelta.
   ========================================================================== */

.pricing-matrix__disclosure > summary {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px;
  border: 1px solid var(--edge-subtle, rgba(148, 163, 184, 0.16));
  border-radius: 14px;
  background: var(--surface-1, #0d1726);
  cursor: pointer;
  list-style: none;
}

.pricing-matrix__disclosure > summary::-webkit-details-marker { display: none; }

.pricing-matrix__summary-title {
  color: var(--text-main, #f7f9fc);
  font-size: 1.05rem;
  font-weight: 600;
}

.pricing-matrix__summary-hint {
  color: var(--text-muted, #9eabbe);
  font-size: 0.85rem;
}

.pricing-matrix__disclosure > summary:focus-visible {
  outline: 2px solid var(--brand-cyan, #22c7f3);
  outline-offset: 2px;
}

/* Abierto en escritorio: el control no debe parecer un botón sin función. */
@media (min-width: 768px) {
  .pricing-matrix__disclosure > summary {
    cursor: default;
    border-color: transparent;
    background: none;
    padding-inline: 0;
  }
  .pricing-matrix__summary-hint { display: none; }
}

@media (max-width: 767px) {
  /* Una tarjeta de plan por fila, sin rejilla de dos columnas comprimida. */
  .pricing-plans,
  .pricing-panel__plans {
    grid-template-columns: 1fr;
  }

  .pricing-plan {
    padding: 18px;
    border-radius: 18px;
  }
}

/* ==========================================================================
   7. CUADRÍCULAS MÓVILES
   ==========================================================================

   El problema no era el tamaño de la letra: era que TODO iba en una columna.
   Medido a 390×844, la home eran 29 600 px y casi cada contenedor de tarjetas
   apilaba hijos de 400–900 px a ancho completo.

   Dos columnas para tarjetas con texto corto; tres solo para métricas e
   iconos. Por debajo de 360 px las de texto vuelven a una columna, porque
   dos de 150 px con tres líneas dejan de leerse.
   ========================================================================== */

@media (max-width: 767px) {
  /* --- Dos columnas: tarjetas con título y una o dos líneas --- */
  .certifications-grid,
  .enterprise-v3__grid,
  .home-v3-solutions__grid,
  .ownership-v3__grid,
  .process-v3__steps,
  .lab-teaser__cards,
  .services-grid,
  .problems-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  /* Las celdas se compactan: el relleno de escritorio no cabe en media
     columna. Radio y relleno dentro de lo pedido (14–18 px, 16–20 px). */
  .certifications-grid > *,
  .enterprise-v3__grid > *,
  .home-v3-solutions__grid > *,
  .ownership-v3__grid > *,
  .process-v3__steps > *,
  .lab-teaser__cards > *,
  .services-grid > *,
  .problems-grid > * {
    padding: 16px;
    border-radius: 18px;
    min-width: 0;
    /*
     * Solo aquí, y por un motivo medido: en una columna de ~155 px un término
     * técnico largo no cabe y empujaba 5 px de scroll horizontal en
     * /servicios/ a 360 px. El elemento no se salía del viewport —era el nodo
     * de texto dentro de su columna—, así que no se veía inspeccionando cajas.
     *
     * `break-word` y no `anywhere`: con `anywhere` el navegador reparte las
     * líneas de forma más agresiva y la home creció 930 px. `break-word` solo
     * parte cuando la palabra no cabe de ninguna manera, que es el caso real.
     */
    overflow-wrap: break-word;
  }

  /* --- Tres columnas: solo cifras --- */
  .hero-v3__proof {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .hero-v3__proof > div { min-width: 0; padding: 14px 8px; }

  /*
   * SIN TRUNCAR. Antes esto llevaba -webkit-line-clamp y dejaba «Proyectos y
   * casos...» cortado con puntos suspensivos. Ahora el HTML trae una etiqueta
   * corta y aquí solo se cambia cuál se ve: la larga pasa a solo-lector, que
   * es distinto de ocultarla.
   */
  .hero-v3__proof dd {
    font-size: 0.8125rem;
    line-height: 1.3;
  }

  .hero-v3__proof .proof-label-full {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .hero-v3__proof .proof-label-short { display: inline; }

  /*
   * El número y el precio TAMPOCO se truncan.
   *
   * home-v3.css línea 201 pone `text-overflow: ellipsis; white-space: nowrap`
   * en el dt. En una columna de un tercio eso dejaba «Desde $550…» cortado, que
   * es justo lo que no puede pasar con un precio. Se anula aquí de forma
   * explícita: el precio parte en dos líneas, como debe.
   */
  .hero-v3__proof dt {
    font-size: 1.4375rem;
    line-height: 1.15;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  .hero-v3__proof-price { font-size: 1.1875rem; }
}

/* La etiqueta corta solo existe en móvil. */
.proof-label-short { display: none; }

/* ==========================================================================
   12. TITULAR DEL HERO CON VARIANTE MÓVIL
   ==========================================================================
   El texto completo va en un span solo-lector dentro del mismo h1, así que la
   semántica no cambia: un h1, un titular accesible. Estas dos reglas solo
   deciden cuál de las dos variantes VISIBLES se pinta.
   ========================================================================== */

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

.hero-title-mobile { display: none; }

@media (max-width: 767px) {
  .hero-title-desktop { display: none; }
  .hero-title-mobile { display: inline; }

  .hero-v3 h1 {
    font-size: 2rem;            /* 32 px */
    line-height: 1.03;
    letter-spacing: -0.03em;
  }

  .hero-v3__eyebrow,
  .hero-v3 .section-kicker {
    font-size: 0.6875rem;       /* 11 px */
    margin-bottom: 18px;
  }

  .hero-v3__description {
    font-size: 0.975rem;
    line-height: 1.5;
    max-width: 34ch;
  }

  .hero-v3__actions { gap: 9px; }
  .hero-v3__actions .btn { min-height: 46px; font-size: 0.9375rem; }
}

@media (max-width: 380px) {
  .hero-v3 h1 { font-size: 1.875rem; }   /* 30 px */
}

@media (max-width: 339px) {
  .hero-v3 h1 { font-size: 1.75rem; }    /* 28 px */
}

/* ==========================================================================
   13. CANALES DE CONTACTO EN LA HOME
   ==========================================================================
   El formulario duplicado se retiró del HTML de la home (vive en /contacto/).
   Lo que queda es una rejilla de dos columnas con los canales.
   ========================================================================== */

.contact-v3__channel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.contact-v3__channel-grid > li {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--edge-subtle, rgba(148, 163, 184, 0.16));
  border-radius: 16px;
  background: var(--surface-1, #0d1726);
  font-size: 0.875rem;
  overflow-wrap: break-word;
}

.contact-v3__channel-label {
  display: block;
  margin-bottom: 2px;
  color: var(--text-muted, #9eabbe);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (max-width: 339px) {
  .contact-v3__channel-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 359px) {
  /* Con menos de 360 px, dos columnas de texto dejan de ser legibles. Las
     cifras y los iconos sí aguantan. */
  .certifications-grid,
  .enterprise-v3__grid,
  .home-v3-solutions__grid,
  .process-v3__steps,
  .services-grid,
  .problems-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   8. ALTURA DE TARJETA CONTROLADA
   ==========================================================================
   El texto largo se recorta VISUALMENTE con -webkit-line-clamp. Sigue entero
   en el HTML —cuenta para SEO y para el lector de pantalla— pero deja de
   estirar la tarjeta. Es divulgación progresiva, no supresión.
   ========================================================================== */

@media (max-width: 767px) {
  .enterprise-v3__card p,
  .home-v3-solution p,
  .ownership-v3__card p,
  .process-v3__steps p,
  .lab-teaser__card p,
  .certification-card p {
    font-size: 0.875rem;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Títulos de tarjeta: dos líneas como mucho, y a tamaño de h3 móvil. */
  .enterprise-v3__card h3,
  .home-v3-solution h3,
  .ownership-v3__card h3,
  .certification-card h3,
  .lab-teaser__card h3 {
    font-size: 1.0625rem;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Miniaturas de certificación: tamaño fijo, no el natural del PNG. */
  .certification-card img,
  .certifications-grid img {
    width: 100%;
    height: 96px;
    object-fit: contain;
  }
}

/* ==========================================================================
   9. PRECIOS: TARJETA CERRADA
   ==========================================================================
   Medido: 876 px por plan (badge 32, nombre 52, precio 50, público 36,
   descripción 88, beneficios 166, meta 112, indicadores 77, toggle 47,
   CTA 46). El objetivo del encargo es 460–600 cerrada.

   Se recorta lo que ya está repetido más abajo o dentro de «Ver alcance»:
   la descripción se limita a dos líneas y los indicadores se pliegan con el
   resto del detalle técnico. Nada se borra del HTML.
   ========================================================================== */

@media (max-width: 767px) {
  .pricing-plan__description {
    font-size: 0.875rem;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Los indicadores repiten en viñetas lo que el alcance detalla al abrir. */
  .pricing-plan__indicators { display: none; }

  .pricing-plan__name { font-size: 1.25rem; line-height: 1.2; }
  .pricing-plan__price { font-size: 1.1875rem; }
  .pricing-plan__meta { gap: 4px 12px; font-size: 0.8125rem; }
  .pricing-feature-list { font-size: 0.875rem; gap: 6px; }
  .pricing-plan { padding: 16px; }

  /* El público objetivo repite en una frase lo que ya dicen nombre y precio. */
  .pricing-plan__audience {
    font-size: 0.8125rem;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* ==========================================================================
   11. CREDENCIALES, SOLUCIONES Y PROMOCIÓN
   ========================================================================== */

@media (max-width: 767px) {
  /*
   * NO se ponen las credenciales en dos columnas.
   *
   * Se probó y salió PEOR: la sección del especialista pasó de 2627 a 2777 px.
   * El contenedor no es una lista de tarjetas equivalentes, así que al
   * repartirlo en dos columnas cada celda crece de alto más de lo que se
   * ahorra en filas, y el relleno de tarjeta se suma. Queda en una columna.
   */

  /* Índice de solución: era un número enorme sobre la tarjeta. */
  .home-v3-solution__index { font-size: 0.8125rem; }

  /*
   * Promoción. La lista de beneficios pasa a rejilla 2×N: eran seis líneas a
   * ancho completo, cada una con su viñeta.
   */
  .launch-promo__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
    font-size: 0.8125rem;
  }

  .launch-promo__list > * { min-width: 0; }

  /* «Precio de lanzamiento» y el importe quedaban pegados. */
  .launch-promo__price-label { display: block; font-size: 0.75rem; }
  .launch-promo__price { display: block; }

}

/* Condiciones de la promoción: control discreto, no un párrafo abierto. */
.launch-promo__terms > summary {
  display: inline-block;
  padding: 8px 0;
  color: var(--text-muted, #9eabbe);
  font-size: 0.8125rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.launch-promo__terms > summary::-webkit-details-marker { display: none; }
.launch-promo__terms > summary:focus-visible { outline: 2px solid var(--brand-cyan, #22c7f3); outline-offset: 2px; }
.launch-promo__terms p { margin: 6px 0 0; color: var(--text-muted, #9eabbe); font-size: 0.8125rem; line-height: 1.5; }

@media (max-width: 359px) {
  .launch-promo__list { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   10. PROYECTOS COMPACTOS
   ==========================================================================
   Medido: la sección de proyectos ocupaba 4691 px con dos tarjetas de 2047.
   ========================================================================== */

@media (max-width: 767px) {
  /* Medido: 8 tarjetas de 502 px en UNA columna, 4106 px de rejilla. En dos
     columnas y con la ficha compacta bajan a la mitad de filas. */
  .live-projects-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .live-project-card {
    min-width: 0;
    padding: 0 0 14px;
    border-radius: 18px;
  }

  .live-project-media__image,
  .live-project-card img {
    height: 116px;
    object-fit: cover;
    object-position: top center;
  }

  .live-project-card__body p,
  .live-project-card p {
    font-size: 0.8125rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .live-project-card h3,
  .live-project-card__title {
    font-size: 1rem;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Los filtros ocupaban 244 px en dos filas de pastillas. */
  .live-projects-toolbar { gap: 8px; }
  .live-projects-filter-set { gap: 6px; font-size: 0.8125rem; }

  /* Tope de la rejilla en la home: live-projects.js marca .is-capped y añade
     el botón. Las tarjetas siguen en el DOM; solo dejan de pintarse. */
  .live-projects-grid.is-capped > article:nth-child(n + 5) { display: none; }
  .live-projects-more { width: 100%; margin-top: 12px; min-height: 46px; }

  /*
   * «Entorno de trabajo»: la foto secundaria y su pie sumaban 528 px. Pasa a
   * tarjeta horizontal —miniatura a la izquierda, texto a la derecha— como
   * pide el encargo, con la imagen a tamaño fijo.
   */
  .founder-context {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    margin: 0;
  }

  .founder-context__media,
  .founder-context__media img {
    width: 104px;
    height: 104px;
    object-fit: cover;
    border-radius: 14px;
  }

  .founder-context__body { font-size: 0.8125rem; line-height: 1.45; }

  .founder-context__body p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

@media (max-width: 359px) {
  /* Dos columnas de ficha de proyecto con título de dos líneas dejan de
     leerse por debajo de 360 px. */
  .live-projects-grid { grid-template-columns: minmax(0, 1fr); }
  .live-project-media__image, .live-project-card img { height: 150px; }
}

/* ==========================================================================
   14. AJUSTE A LOS PRESUPUESTOS POR SECCIÓN
   ==========================================================================
   Cada regla de aquí sale de comparar la altura medida con el presupuesto del
   encargo. Se anota el antes y el objetivo para que se pueda volver a revisar.
   ========================================================================== */

@media (max-width: 767px) {
  /* --- Fundador: 2606 px, objetivo 1200–1550 --- */

  /* El retrato es la pieza principal, pero 499 px es media pantalla. */
  .specialist-v3__visual { max-height: 300px; }
  .specialist-v3__photo img { max-height: 280px; }

  /*
   * La home muestra TRES credenciales destacadas, como pide el encargo; el
   * resto está en /especialista/, que es la página del perfil completo. No es
   * un display:none a ciegas: hay enlace a la página y el contenido sigue en
   * el HTML para SEO.
   */
  .specialist-v3__credentials > li:nth-child(n + 4),
  .specialist-v3__credentials > .specialist-v3__credential:nth-child(n + 4) { display: none; }

  .specialist-v3__skills { font-size: 0.8125rem; gap: 6px; }
  .specialist-education,
  .specialist-role { font-size: 0.8125rem; line-height: 1.45; }

  /* --- Certificaciones: 1682 px --- */
  .certifications-grid img,
  .certification-card img { height: 76px; }
  .certification-card,
  .certifications-grid > * { padding: 14px; }

  /* --- Garantías: 1492 px, ocho celdas en dos columnas --- */
  .ownership-v3__grid { gap: 10px; }
  .ownership-v3__grid > * { padding: 14px; }
  .ownership-v3__card p,
  .ownership-v3__grid p { -webkit-line-clamp: 2; font-size: 0.8125rem; }

  /* --- Guild Lab en la home: 1042 px, objetivo 520–700 ---
     La home resume; el detalle metodológico vive en /herramientas/. */
  .lab-teaser__lead {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .lab-teaser__cards { gap: 10px; }
  .lab-teaser__cards > * { padding: 14px; }

  /* --- Metodología y soluciones --- */
  .process-v3__steps > *,
  .home-v3-solutions__grid > * { padding: 14px; }

  /* --- Contacto de la home: 1040 px, objetivo 500–750 ---
     Las FAQ se quedan, pero cerradas y compactas. */
  .contact-v3__faq { gap: 8px; }
  .contact-v3__faq summary { font-size: 0.9375rem; padding-block: 10px; }
  .contact-v3__intro ul { font-size: 0.8125rem; }
}

/* ==========================================================================
   6. PERFIL Y FUNDADOR
   ========================================================================== */

@media (max-width: 767px) {
  /*
   * El nombre es un h3 y salía a 32 px por el suelo de su clamp, pensado para
   * escritorio. Se baja al rango de un h3 sin tocar la regla original: aquí
   * el clamp vuelve a ser fluido de verdad.
   */
  .specialist-v3 .specialist-name {
    /* Tope en 23 px, el máximo de un h3 en móvil. */
    font-size: clamp(1.375rem, 5.6vw, 1.4375rem);
  }

  /*
   * Un h2 a 43 px en un teléfono es un titular de portada, no un encabezado.
   * La especificidad tiene que igualar a la del origen: home-v3.css lo fija
   * con `.specialist-v3 .specialist-heading h2` y specialist.css con
   * `.specialist-heading h2`. Con un solo selector corto no ganaba, y el
   * validador seguía viendo 32 px.
   */
  .specialist-heading h2,
  .specialist-v3 .specialist-heading h2 {
    font-size: clamp(1.5rem, 7vw, 1.9375rem);
  }
}