/* Páginas de producto (/productos/<slug>): reglas propias de la plantilla.
   Se carga después de styles.css; los componentes compartidos (cabecera, pie,
   botones, chips, composición .split, motivo) siguen usando styles.css sin
   cambios. Sistema incumbente: superficies planas, alternancia de bandas,
   filetes finos, sin etiquetas sobre los encabezados; ámbar racionado: en una
   página de producto son las tres barras de las tarjetas de conexión y el
   punto final del h2 de cierre (más el nodo del motivo y el borde del pie). */

/* --- Hero -------------------------------------------------------------- */
/* Variante sin media: texto centrado (composición del hero del landing) y la
   banda cierra con el divisor estático del motivo; se reserva el alto del
   divisor en el padding inferior, como en Experiencia. */
.product-hero { background: var(--ad-surface); position: relative; overflow: hidden; padding-top: var(--ad-hero-padding-top); padding-bottom: var(--ad-experience-padding-bottom); }
.product-hero-content { text-align: center; position: relative; z-index: 1; }
.product-hero-back { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: 22px; color: var(--ad-text-muted); font-size: var(--ad-text-14); font-weight: 600; text-decoration: none; }
.product-hero-back:hover { color: var(--ad-heading); text-decoration: underline; }
/* El chip de estado acompaña al nombre: va justo debajo del h1 (nada se
   coloca sobre un encabezado) y el lead conserva su hueco de 26px. */
.product-hero-meta { display: flex; justify-content: center; align-items: center; margin-top: 18px; }
.product-hero-lead { max-width: 640px; margin: 26px auto 10px; font-size: var(--ad-text-19); line-height: 1.6; color: var(--ad-text-muted); text-wrap: pretty; }
.product-hero-support { max-width: 780px; margin: 0 auto 28px; font-size: var(--ad-text-16); line-height: 1.65; color: var(--ad-text-muted); text-wrap: pretty; }
/* Nota de estado opcional (statusNote): una oración atenuada bajo el texto de
   apoyo. El margen negativo recupera parte del hueco de 28px del apoyo para
   que la nota se lea pegada a él, y deja el mismo hueco antes del botón. */
.product-hero-note { max-width: 640px; margin: -16px auto 28px; font-size: var(--ad-text-14); line-height: 1.6; color: var(--ad-text-muted); text-wrap: pretty; }
.product-hero .button { min-width: 285px; }
.product-hero-divider { position: absolute; bottom: 0; left: 0; width: 100%; height: var(--ad-experience-divider-height); pointer-events: none; }
.product-hero-divider svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* Variante con imagen de portada: composición partida del sistema
   (0.85fr 1.15fr, como .split), texto a la izquierda; la imagen conduce la
   banda y el divisor no se dibuja. */
.product-hero--media { padding-block: var(--ad-section-padding); }
.product-hero-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--ad-section-gap); align-items: center; }
.product-hero--media .product-hero-content { text-align: left; }
.product-hero--media .product-hero-meta { justify-content: flex-start; }
.product-hero--media .product-hero-lead { margin: 26px 0 10px; }
.product-hero--media .product-hero-support { margin: 0 0 28px; }
.product-hero--media .product-hero-note { margin: -16px 0 28px; }

/* --- Medios ------------------------------------------------------------ */
/* Figuras planas con filete y radio de panel; dimensiones explícitas en el
   marcado (CLS 0); la galería es diferida desde el propio elemento. */
.product-media { margin: 0; }
.product-media img, .product-media video { width: 100%; height: auto; display: block; border: 1px solid var(--ad-color-border); border-radius: var(--ad-radius-panel); background: var(--ad-color-white); }
.product-media figcaption { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 10px; margin-top: 12px; font-size: var(--ad-text-13); line-height: 1.55; color: var(--ad-text-muted); }
/* Etiqueta "Ilustración" (visual que no es captura real): mismo tratamiento
   de chip que los estados del landing, sin usar la clase de estado. */
.media-kind { display: inline-flex; align-items: center; border-radius: 4px; padding: 3px 10px; font-size: var(--ad-text-12); font-weight: 600; line-height: 1.65; background: var(--ad-surface); color: var(--ad-heading); border: 1px solid var(--ad-color-indigo-soft); }

/* --- Capacidades (blanca) ------------------------------------------------ */
/* Filas calladas con filete fino en dos columnas: la anatomía de
   .solution-list del landing (título + texto, sin barra ámbar). Sin hueco
   entre filas para que los filetes se lean como renglones de una lista; el
   último renglón de cada columna cierra con su propio filete. */
.product-caps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 48px; margin-top: 40px; }
.product-caps article { border-top: 1px solid var(--ad-color-border); padding-block: 28px; }
.product-caps article:nth-last-child(-n+2) { border-bottom: 1px solid var(--ad-color-border); }
.product-caps h3 { margin-bottom: 10px; }
.product-caps p { color: var(--ad-text-muted); margin: 0; max-width: 68ch; text-wrap: pretty; }

/* --- En pantalla (lavanda) ---------------------------------------------- */
.product-gallery { background: var(--ad-surface); }
.product-gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; margin-top: 40px; }
/* Una sola pieza ocupa el ancho completo en lugar de media cuadrícula. */
.product-gallery-grid > :only-child { grid-column: 1 / -1; }

/* --- Lo que conecta (índigo: la única banda inversa de la página) -------- */
.product-connect { background: var(--ad-inverse-background); color: var(--ad-inverse-text); }
.product-connect h2, .product-connect h3 { color: var(--ad-inverse-text); }
.product-connect h2 { max-width: 1000px; }
.product-connect-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; margin-top: 40px; }
.product-connect-grid article { padding-top: 18px; border-top: 1px solid var(--ad-color-indigo-soft); }
.product-connect-grid h3::before { content: ''; display: block; width: 28px; height: 3px; background: var(--ad-color-amber); margin-bottom: 18px; }
.product-connect-grid p { margin: 0; font-size: var(--ad-text-15); color: var(--ad-color-lavender); }

/* --- Para quién (blanca) ------------------------------------------------- */
/* Composición partida del landing (.split, .section-intro en styles.css): el
   h2 y la intro opcional a la izquierda, las filas de segmentos a la derecha,
   con la anatomía de .solution-list. */
.product-audience-list { padding: 0; margin: 0; list-style: none; }
.product-audience-list li { border-top: 1px solid var(--ad-color-border); padding-block: 28px; }
.product-audience-list li:last-child { padding-bottom: 0; }
.product-audience-list h3 { margin-bottom: 8px; }
.product-audience-list p { color: var(--ad-text-muted); margin: 0; max-width: 68ch; text-wrap: pretty; }

/* --- CTA de cierre (lavanda) --------------------------------------------- */
.product-cta { background: var(--ad-surface); text-align: center; }
.product-cta h2 { max-width: 760px; margin-inline: auto; }
.product-cta-lead { max-width: 560px; margin: 20px auto 32px; font-size: var(--ad-text-17); color: var(--ad-text-muted); text-wrap: pretty; }
.product-cta .button { min-width: 285px; }
.product-cta-alt { margin: 18px auto 0; max-width: 560px; font-size: var(--ad-text-14); color: var(--ad-text-muted); }
/* Objetivo táctil de 44px sin cambiar la caja de la línea (padding y margen
   negativo se compensan), mismo recurso que el enlace de fila del landing. */
.product-cta-alt a { display: inline-block; min-height: 44px; padding-block: 9px; margin-block: -9px; font-weight: 600; color: var(--ad-heading); }

/* --- Bandas responsivas --------------------------------------------------- */
/* ≤1100px: composiciones partidas se apilan; la de conexión pasa a una columna
   (como Aplicaciones en el landing). */
@media (max-width: 1100px) {
  .product-hero-grid { display: block; }
  .product-hero-grid > .product-media { margin-top: 40px; }
  .product-connect-grid { grid-template-columns: 1fr; gap: 24px; }
  /* La composición partida se apila (styles.css): la lista de segmentos deja
     el mismo hueco que .solution-list bajo la intro. */
  .product-audience-list { margin-top: 40px; }
}
@media (max-width: 760px) {
  .product-hero { padding-top: var(--ad-hero-padding-top-compact); padding-bottom: var(--ad-experience-padding-bottom-compact); }
  .product-hero--media { padding-block: var(--ad-section-padding-compact); }
  .product-hero-divider { height: var(--ad-experience-divider-height-compact); }
  .product-hero .button { min-width: 0; width: 100%; }
  .product-hero-meta { margin-top: 14px; }
  .product-hero-lead { font-size: var(--ad-text-15); line-height: 1.65; margin-top: 22px; }
  .product-hero-support { font-size: var(--ad-text-14); margin-bottom: 24px; }
  .product-hero-note { margin: -12px auto 24px; font-size: var(--ad-text-13); }
  .product-hero--media .product-hero-note { margin: -12px 0 24px; }
  /* Una columna: solo el último renglón cierra con filete (el penúltimo ya
     no termina una columna propia). */
  .product-caps { grid-template-columns: 1fr; margin-top: 32px; }
  .product-caps article { padding-block: 24px; }
  .product-caps article:nth-last-child(2) { border-bottom: 0; }
  .product-caps p { font-size: var(--ad-text-14); }
  .product-gallery-grid { grid-template-columns: 1fr; gap: 24px; margin-top: 32px; }
  .product-connect-grid { margin-top: 32px; }
  .product-connect-grid article { padding-top: 20px; }
  .product-connect-grid h3::before { margin-bottom: 14px; }
  .product-audience-list { margin-top: 30px; }
  .product-audience-list li { padding-block: 24px; }
  .product-audience-list p { font-size: var(--ad-text-14); }
  .product-cta-lead { font-size: var(--ad-text-15); }
  .product-cta .button { min-width: 0; width: 100%; }
}