/* =============================================================
 * site.css · Home y páginas institucionales de la web unificada
 * -------------------------------------------------------------
 * Usa los tokens de tokens.css y reutiliza .container/.btn/.section
 * de app.css. Layout portado de asemdis.com (ver captura y
 * docs/referencia-web-viva/home.html).
 * ============================================================= */

/* Subrayado de marca bajo la última palabra de los encabezados.
   Rota el color por sección siguiendo la paleta. */
.pagina-home .last-word .word-deco path,
.pagina-institucional .last-word .word-deco path { fill: var(--coral); }
.section--mision   .last-word .word-deco path { fill: var(--orange); }
.section--valores  .last-word .word-deco path { fill: var(--coral); }
.section--quienes  .last-word .word-deco path { fill: var(--teal); }
.section--ayuda    .last-word .word-deco path { fill: var(--teal-darker); }

/* Todas las secciones sobre blanco (fondo base de marca) */
.section { background: var(--white); }

/* Separadores dashed: aire arriba/abajo */
.dashed-divider { margin: 4px auto; }

/* ---------- Hero ---------- */
.home-hero {
  padding: 40px 0 72px;
  text-align: center;
  background: var(--white);
}
.home-hero__kicker {
  color: var(--coral-dark); /* AA: coral accesible (el vivo daba 2,99:1) */
  font-weight: 700;
  letter-spacing: .22em;
  font-size: var(--t-small);
  margin: 0 0 4px;
}
.home-hero__script {
  font-family: var(--f-script);
  color: var(--teal-dark); /* AA: teal accesible (el vivo daba 2,71:1) */
  font-weight: 400;
  font-size: clamp(56px, 10vw, 120px);
  line-height: 1;
  margin: 0 0 28px;
}
.home-hero__lead {
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--ink-soft);
  max-width: 56ch;
  margin: 0 auto 6px;
}
.home-hero__ask { font-size: var(--t-body); font-weight: 700; margin: 0 0 26px; }
.home-hero__cta { margin: 0; }

/* ---------- Ritmo de secciones ---------- */
.section h2 { font-size: var(--t-h2); line-height: 1.1; margin: 0 0 24px; }
.section h3 { font-size: var(--t-h3); margin: 0 0 12px; }
.centrado { text-align: center; }
.section__intro {
  font-size: var(--t-body); line-height: var(--lh-body);
  color: var(--ink-soft); max-width: 70ch; margin: 0 0 32px;
}
.section__intro--centrado { margin-left: auto; margin-right: auto; text-align: center; }
.section__foot {
  font-size: var(--t-small); line-height: 1.6; color: var(--ink-soft);
  max-width: 68ch; margin: 28px 0 0;
}
.section__cta { margin: 32px 0 0; display: flex; flex-wrap: wrap; gap: 16px; }
.section__cta--centrado { justify-content: center; }

/* ---------- Fila imagen circular + texto ---------- */
.media-row {
  display: grid;
  grid-template-columns: .85fr 1.15fr;   /* imagen izquierda, texto derecha */
  align-items: center;
  gap: 64px;
}
.media-row--text-left { grid-template-columns: 1.15fr .85fr; }  /* texto izquierda */
.media-row__text p {
  font-size: var(--t-small); line-height: 1.7; color: var(--ink-soft);
  margin: 0 0 16px;
}
.media-row__text p:last-child { margin-bottom: 0; }

/* Círculo con anillo de color por sección */
.circulo {
  display: block;
  width: 100%;
  max-width: 380px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  border-radius: 50%;
  overflow: hidden;
  border: 7px solid var(--teal);
  background: var(--white);
}
.circulo picture { display: block; width: 100%; height: 100%; }
.circulo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.circulo--gold  { border-color: var(--gold); }
.circulo--teal  { border-color: var(--teal); }
.circulo--coral { border-color: var(--coral); }

/* ---------- Valores (chips) ---------- */
.valores { list-style: none; margin: 0 0 8px; padding: 0; }
.valor {
  font-weight: 700; color: var(--ink); font-size: var(--t-small);
  padding: 4px 0 4px 22px; position: relative;
}
.valor::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 9px; height: 9px; border-radius: 50%; background: var(--coral);
}

/* ---------- ¿Podemos ayudarte? (tres iconos circulares) ---------- */
.servicios-tres {
  list-style: none; margin: 8px 0 0; padding: 0;
  display: flex; justify-content: center; flex-wrap: wrap; gap: 56px;
}
.servicio-tres { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.servicio-tres__ic {
  width: 118px; height: 118px; border-radius: 50%;
  border: 2px solid var(--ink); color: var(--ink);
  display: grid; place-items: center;
}
.servicio-tres__ic svg { width: 56px; height: 56px; }
.servicio-tres__t { font-size: var(--t-h3); font-weight: 700; }

/* ---------- Páginas ---------- */
/* Las migas de pan se estilan en app.css (única implementación). */
.nota-pendiente { color: var(--ink-muted); font-style: italic; }
.section-pad { padding: 90px 0; }

/* ---------- Página "Quiénes somos" ---------- */
.section--quienes-intro .last-word .word-deco path { fill: var(--coral); }
.section--junta .last-word .word-deco path { fill: var(--teal); }

.prosa p {
  font-size: var(--t-body); line-height: var(--lh-body);
  color: var(--ink-soft); margin: 0 0 22px;
}
.prosa__lead { font-size: var(--t-h3); font-weight: 700; margin: 8px 0 18px; }
.lista-marca { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.lista-marca li {
  position: relative; padding-left: 34px;
  font-size: var(--t-small); line-height: 1.6; color: var(--ink-soft);
}
.lista-marca li::before {
  content: ""; position: absolute; left: 0; top: .35em;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--coral-soft); border: 3px solid var(--coral);
}

/* Junta directiva · tarjetas circulares con icono (marca de agua de fondo) */
.section--junta { position: relative; overflow: hidden; }
.section--junta > .container { position: relative; z-index: 1; }
.section--junta::before {
  content: ""; position: absolute; left: 50%; top: 56%;
  transform: translate(-50%, -50%);
  width: min(720px, 86%); aspect-ratio: 1;
  background: url("../img/asemdis-isotipo.png") center / contain no-repeat;
  opacity: .05; pointer-events: none;
}
.junta {
  list-style: none; margin: 44px auto 0; padding: 0; max-width: 900px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 44px 40px;
}
.junta-card {
  flex: 0 0 236px; width: 236px; aspect-ratio: 1;
  border-radius: 50%; border: 2px solid var(--coral); background: var(--white);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 26px;
}
.junta-card__ic { color: var(--ink); margin-bottom: 10px; line-height: 0; }
.junta-card__ic svg { width: 48px; height: 48px; }
.junta-card__nombre { font-weight: 700; font-size: 21px; line-height: 1.15; }
.junta-card__cargo { color: var(--ink-soft); font-size: 15px; line-height: 1.3; margin-top: 5px; }

@media (max-width: 560px) {
  .junta-card { flex-basis: 260px; width: 260px; }
}

/* ---------- Páginas de Servicios ---------- */
.section--serv-intro .last-word .word-deco path { fill: var(--orange); }
.section--serv-cards .last-word .word-deco path { fill: var(--coral); }

.foto-grid { display: block; max-width: 820px; margin: 8px auto 40px; }
.foto-grid img { width: 100%; height: auto; border-radius: 16px; display: block; }

.prosa--ancha { max-width: 900px; margin-left: auto; margin-right: auto; }
.prosa--ancha p { font-size: var(--t-small); line-height: 1.7; color: var(--ink-soft); margin: 0 0 18px; }
.prosa--centrada { text-align: left; }
.section--serv-cards h2 { max-width: 20ch; margin-inline: auto; }

/* Tarjetas con borde de boceto */
.cards-boceto {
  list-style: none; margin: 48px 0 0; padding: 0;
  display: grid; gap: 28px 26px;
}
.cards-boceto--3 { grid-template-columns: repeat(3, 1fr); }
.cards-boceto--4 { grid-template-columns: repeat(4, 1fr); }
.card-boceto {
  position: relative; color: var(--coral);
  padding: 34px 26px; text-align: center;
  display: flex; min-height: 300px;
}
.card-boceto .boceto { position: absolute; inset: 0; width: 100%; height: 100%; }
.card-boceto__in { position: relative; z-index: 1; margin: auto 0; width: 100%; }
.card-boceto__t { color: var(--ink); font-weight: 700; font-size: 21px; line-height: 1.2; margin: 0 0 12px; }
.card-boceto__p { color: var(--ink-soft); font-size: 15px; line-height: 1.55; margin: 0; }

@media (max-width: 1024px) {
  .cards-boceto--4 { grid-template-columns: repeat(2, 1fr); }
  .cards-boceto--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .cards-boceto--3, .cards-boceto--4 { grid-template-columns: 1fr; }
  .card-boceto { min-height: 0; }
}

/* ---------- Asociarse (iframe de preinscripción) ---------- */
.embed-preinscripcion { max-width: 900px; margin: 28px auto 0; }
.embed-preinscripcion iframe { width: 100%; min-height: 900px; border: 0; display: block; }

/* ---------- Formulario de contacto ---------- */
.form-contacto { max-width: 620px; margin: 8px auto 0; text-align: left; }
.campo { margin-bottom: 18px; }
.campo label { display: block; font-weight: 700; margin-bottom: 6px; font-size: var(--t-small); }
.req { color: var(--coral); }
.campo input, .campo textarea {
  width: 100%; padding: 12px 14px; font: inherit; font-size: 18px;
  border: 2px solid var(--teal); border-radius: 8px; background: var(--white);
}
.campo input:focus, .campo textarea:focus {
  outline: 2px solid var(--coral); outline-offset: 1px; border-color: var(--coral);
}
.campo--check { margin-top: 4px; }
.check-priv { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: var(--t-small); }
.check-priv input { width: auto; margin-top: 5px; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-contacto .btn { margin-top: 8px; }
.form-rgpd { margin-top: 22px; font-size: 15px; color: var(--ink-soft); }
.form-rgpd summary { font-weight: 700; cursor: pointer; }
.form-rgpd p { margin-top: 10px; line-height: 1.6; }
.form-aviso { max-width: 620px; margin: 0 auto 18px; padding: 14px 18px; border-radius: 8px; font-weight: 700; }
.form-aviso--ok { background: var(--teal-soft); color: var(--teal-darker); }
.form-aviso--err { background: var(--coral-soft); color: var(--coral-dark); }

/* ---------- "Si lo prefieres en persona" ---------- */
.persona-row {
  display: grid; grid-template-columns: 1fr 1.2fr; gap: 44px; align-items: center;
  max-width: 900px; margin: 36px auto 0;
}
.persona-datos { display: grid; gap: 20px; }
.persona-item { display: flex; align-items: flex-start; gap: 12px; margin: 0; font-size: var(--t-small); color: var(--ink-soft); }
.persona-item svg { color: var(--coral); flex: 0 0 auto; width: 24px; height: 24px; margin-top: 3px; }
.persona-item a { color: var(--ink-soft); }
.persona-mapa iframe { width: 100%; height: 360px; border: 0; border-radius: 14px; display: block; }
@media (max-width: 760px) { .persona-row { grid-template-columns: 1fr; gap: 24px; } }

/* ---------- Pre-footer tagline ---------- */
.pre-tagline { text-align: center; padding: 52px 0 12px; background: var(--white); }
.pre-tagline__txt { font-family: var(--f-script); color: var(--teal-dark); font-size: clamp(40px, 7vw, 64px); line-height: 1; }

/* ---------- Descargas (Portal de transparencia) ---------- */
.descarga { text-align: center; margin-top: 28px; }
.descarga .btn { display: inline-flex; align-items: center; gap: 10px; }
.descarga .btn svg { width: 22px; height: 22px; }
.descarga__nota { color: var(--ink-muted); font-size: var(--t-small); margin-top: 18px; }

/* =============================================================
 * BLOG / NOTICIAS
 * ============================================================= */
.section--blog .last-word .word-deco path { fill: var(--teal); }
.btn--sm { padding: 10px 22px; font-size: 15px; }

/* Chip de categoría */
.chip {
  display: inline-block; background: var(--teal-soft); color: var(--teal-darker);
  font-weight: 700; font-size: 13px; padding: 4px 13px; border-radius: 999px;
  text-decoration: none;
}
.chip:hover { background: var(--teal); color: var(--white); text-decoration: none; }

/* Layout archivo: barra lateral + resultados */
.blog-layout { display: grid; grid-template-columns: 262px 1fr; gap: 48px; align-items: start; margin-top: 36px; }
.blog-filtros { position: sticky; top: 100px; }
.filtro-buscar input {
  width: 100%; padding: 10px 12px; font: inherit; font-size: 16px;
  border: 2px solid var(--teal); border-radius: 8px; margin-bottom: 22px;
}
.faceta-legend { font-weight: 700; display: block; margin-bottom: 10px; }
.faceta { border: 0; padding: 0; margin: 0 0 20px; }
.faceta-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.faceta-op {
  display: block; padding: 8px 12px; border-radius: 8px; color: var(--ink-soft);
  text-decoration: none; border: 1px solid var(--gray-line); font-size: 15px;
}
.faceta-op:hover, .faceta-op.is-active { background: var(--coral-soft); border-color: var(--coral); color: var(--coral-dark); text-decoration: none; }

/* Filas de artículo */
.blog-filtro-activo { color: var(--ink-soft); margin: 0 0 18px; }
.post-list { display: grid; }
.post-row {
  display: grid; grid-template-columns: 140px 1fr; gap: 26px; align-items: start;
  padding: 26px 0; border-bottom: 1px solid var(--gray-line);
}
.post-list .post-row:first-child { padding-top: 6px; }
.post-row__media img { width: 140px; height: 140px; border-radius: 50%; object-fit: cover; display: block; }
.post-row__title { font-size: 23px; line-height: 1.2; margin: 12px 0 6px; }
.post-row__title a { color: var(--ink); }
.post-row__title a:hover { color: var(--coral-dark); }
.post-row__meta { color: var(--ink-muted); font-size: 15px; margin: 0 0 8px; display: flex; gap: 8px; flex-wrap: wrap; }
.post-row__meta a { color: var(--teal-darker); font-weight: 700; }
.post-row__excerpt { color: var(--ink-soft); font-size: 16px; line-height: 1.6; margin: 0 0 10px; }
.leer-mas { color: var(--coral-dark); font-weight: 700; }
.blog-vacio { color: var(--ink-soft); }

/* Paginación */
.paginacion { display: flex; gap: 8px; justify-content: center; margin-top: 36px; flex-wrap: wrap; }
.pag { padding: 8px 14px; border-radius: 8px; border: 1px solid var(--gray-line); color: var(--ink-soft); text-decoration: none; }
.pag:hover { border-color: var(--coral); color: var(--coral-dark); text-decoration: none; }
.pag--actual { background: var(--coral); color: var(--white); border-color: var(--coral); font-weight: 700; }

/* Directorio facetado (marketplace): barra lateral + resultados */
.dir-layout { display: grid; grid-template-columns: 262px 1fr; gap: 44px; align-items: start; margin-top: 36px; }
.dir-filtros { position: sticky; top: 100px; }
.dir-filtros select { width: 100%; padding: 9px 12px; border: 2px solid var(--teal); border-radius: 8px; font: inherit; font-size: 15px; background: var(--white); }
.faceta-radio { display: flex; align-items: center; gap: 9px; cursor: pointer; padding: 6px 8px; border-radius: 8px; color: var(--ink-soft); }
.faceta-radio:hover { background: var(--gray-bg); }
.faceta-radio input { flex: 0 0 auto; accent-color: var(--coral); }
.faceta-radio > span { font-size: 15px; }
.faceta-radio > span:not(.faceta-n) { flex: 1; }
.faceta-n { color: var(--ink-muted); font-size: 13px; background: var(--gray-bg); border-radius: 999px; padding: 1px 9px; }
.dir-filtros__acciones { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.faceta-form { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--gray-line); }
.dir-filtros__limpiar { font-size: 13px; font-weight: 600; color: var(--ink-muted); }
.dir-filtros__limpiar:hover { color: var(--coral-dark); }
.dir-filtros__toggle { display: none; }
@media (max-width: 1024px) {
  .dir-filtros { position: static; }
  .dir-filtros__toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 13px 16px; border: 1px solid var(--gray-line); border-radius: 12px; background: var(--white); font-family: inherit; font-weight: 700; font-size: 15px; color: var(--ink); cursor: pointer; }
  .dir-filtros__toggle::after { content: "▾"; font-size: 13px; }
  .dir-filtros__toggle[aria-expanded="true"]::after { content: "▴"; }
  .dir-filtros.is-collapsed .dir-filtros__cuerpo { display: none; }
  .dir-filtros__cuerpo { margin-top: 12px; }
}
.dir-resultados__head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 12px; flex-wrap: wrap; }
.dir-resultados__head h2 { font-size: var(--t-h3); margin: 0; }
.dir-resultados__n { color: var(--ink-muted); margin: 0; }
.related-grid--dir { grid-template-columns: repeat(2, 1fr); gap: 24px; }
@media (max-width: 620px) { .related-grid--dir { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
  .dir-layout { grid-template-columns: 1fr; gap: 26px; }
  .dir-filtros { position: static; }
}

/* Single de artículo */
.articulo__head { padding-top: 6px; text-align: left; }
.articulo__head .chip { margin-bottom: 12px; }
.articulo__title { font-size: var(--t-h1); line-height: 1.1; margin: 6px 0 18px; }
.articulo__meta { display: flex; align-items: center; gap: 12px; color: var(--ink-muted); font-size: 15px; }
.avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--teal); color: var(--white); display: grid; place-items: center; font-weight: 700; font-size: 16px; flex: 0 0 auto; }
.articulo__by a { color: var(--teal-darker); font-weight: 700; }
.articulo__portada { margin: 30px auto 0; max-width: 1000px; }
.articulo__portada img { width: 100%; height: auto; max-height: 520px; object-fit: cover; border-radius: 16px; display: block; }

/* Cuerpo del artículo centrado a su ancho de lectura. En pantallas anchas el
   índice flota (sticky) en el margen izquierdo; en estrechas se recoge encima. */
.articulo__grid { margin: 40px auto 0; }
.toc { max-width: 760px; margin: 0 auto 10px; }
.toc__box { background: var(--gray-bg); border-radius: 12px; padding: 0 18px; }
.toc__title { list-style: none; cursor: pointer; font-weight: 700; padding: 14px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.toc__title::-webkit-details-marker { display: none; }
.toc__title::after { content: ""; flex: 0 0 auto; width: 9px; height: 9px; border-right: 2px solid var(--ink-muted); border-bottom: 2px solid var(--ink-muted); transform: rotate(45deg); transition: transform .2s; }
.toc__box[open] .toc__title::after { transform: rotate(-135deg); }
.toc__list { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 9px; }
.toc__item a { color: var(--ink-soft); text-decoration: none; font-size: 15px; line-height: 1.35; }
.toc__item a:hover { color: var(--coral); }
.toc__item--n3 { padding-left: 14px; font-size: 14px; }

.prosa-articulo { max-width: 760px; margin: 0 auto; }
.prosa-articulo .lead { font-size: 21px; color: var(--ink); font-weight: 400; }
/* Encabezados dentro de la prosa (artículo y legal comparten escala): h2=30, h3=22 */
.prosa-articulo h2 { font-size: 30px; line-height: 1.2; margin: 38px 0 14px; scroll-margin-top: 100px; }
.prosa-articulo h3 { font-size: 22px; margin: 28px 0 10px; scroll-margin-top: 100px; }
.prosa-articulo p { font-size: 19px; line-height: 1.75; color: var(--ink-soft); margin: 0 0 20px; }
.prosa-articulo ul, .prosa-articulo ol { margin: 0 0 20px; padding-left: 24px; color: var(--ink-soft); font-size: 19px; line-height: 1.7; }
.prosa-articulo li { margin-bottom: 8px; }
.prosa-articulo a { color: var(--coral-dark); text-decoration: underline; }

/* Caja de autor (E-E-A-T) */
.autor-box { display: flex; gap: 18px; align-items: flex-start; background: var(--gray-bg); border-radius: 14px; padding: 24px; margin: 48px auto 0; max-width: 720px; }
.autor-box__av, .autor-head__av { border-radius: 50%; background: var(--coral); color: var(--white); display: grid; place-items: center; font-weight: 700; flex: 0 0 auto; }
.autor-box__av { width: 64px; height: 64px; font-size: 22px; }
.autor-box__nombre a { color: var(--ink); font-weight: 700; }
.autor-box__cargo { color: var(--ink-muted); font-size: 15px; }
.autor-box__bio { color: var(--ink-soft); font-size: 16px; line-height: 1.6; margin-top: 6px; }

/* Página de autor · bloque de identidad: foto GRANDE a la izquierda + nombre,
   cargo y formación al lado; la biografía completa va debajo (a todo el ancho). */
.autor-head { display: flex; gap: 34px; align-items: flex-start; }
.autor-head__av { width: 168px; height: 168px; font-size: 54px; }
.autor-head__id { flex: 1 1 auto; min-width: 0; }
.autor-head__nombre { font-size: var(--t-h1); line-height: 1.1; margin: 0; }
.autor-head__cargo { color: var(--ink-muted); font-size: 18px; margin: 6px 0 0; }
.autor-bio { margin: 26px 0 0; }
.autor-bio p { color: var(--ink-soft); font-size: 18px; line-height: 1.75; margin: 0 0 16px; }
.autor-bio p:last-child { margin-bottom: 0; }
.autor-head__redes { list-style: none; display: flex; gap: 12px; padding: 0; margin: 16px 0 0; }

@media (max-width: 560px) {
  .autor-head { flex-direction: column; align-items: center; text-align: center; gap: 20px; }
  .autor-head__av { width: 132px; height: 132px; }
  .autor-head__cred li { text-align: left; }
  .autor-head__redes { justify-content: center; }
}

/* Avatar con foto (si la hay) o iniciales */
.avatar, .autor-box__av, .autor-head__av { overflow: hidden; }
.avatar img, .autor-box__av img, .autor-head__av img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Redes y credenciales de la ficha de autor */
.autor-head__redes .red-icono { color: var(--teal-darker); display: inline-flex; }
.autor-head__redes .red-icono:hover { color: var(--coral); }
.autor-head__redes svg { width: 26px; height: 26px; }
.autor-head__cred { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 7px; }
.autor-head__cred li { position: relative; padding-left: 20px; color: var(--ink-soft); font-size: 15px; line-height: 1.4; }
.autor-head__cred li::before { content: ""; position: absolute; left: 0; top: .45em; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); }

/* =============================================================
 * COMPONENTES DE ARTÍCULO (reutilizables en todos los posts)
 * -------------------------------------------------------------
 * Tabla comparativa, cuadros ventajas/inconvenientes (verde/rojo),
 * callout de aviso e imágenes a dos columnas. Siguen los tokens de
 * marca; se usan en el cuerpo de cualquier artículo del blog.
 * ============================================================= */

/* Nota destacada: caja con relleno suave y esquinas redondeadas. El acento de
   color va en el BORDE SUPERIOR (no en el lateral izquierdo, que es el patrón
   trillado de los "callout" de IA). */
.nota-callout {
  background: var(--teal-pale); border-top: 4px solid var(--teal);
  border-radius: 14px; padding: 18px 22px; margin: 0 0 24px;
}
.nota-callout p { margin: 0; font-size: 17px; color: var(--ink-soft); line-height: 1.6; }

/* Cuadros de comparación: ventajas (verde) / inconvenientes (rojo).
   Tarjetas con relleno y borde completo (no una barra lateral). */
.cajas-comparacion { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin: 26px 0; }
.caja { border-radius: 14px; padding: 22px 24px; border: 1px solid; }
.caja__t { font-size: 18px; font-weight: 700; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.caja ul { margin: 0; padding-left: 20px; }
.caja li { margin-bottom: 10px; font-size: 16px; line-height: 1.55; }
.caja li:last-child { margin-bottom: 0; }
.caja--pro { background: #EAF7EF; border-color: #B7E2C7; }
.caja--pro .caja__t { color: #1E7A45; }
.caja--pro li::marker { color: #2F9E5C; }
.caja--con { background: var(--coral-soft); border-color: #F3B7AE; }
.caja--con .caja__t { color: var(--coral-dark); }
.caja--con li::marker { color: var(--coral); }

/* Tabla comparativa */
.tabla-scroll { overflow-x: auto; margin: 24px 0; -webkit-overflow-scrolling: touch; }
.tabla-comparativa {
  width: 100%; border-collapse: collapse; min-width: 640px;
  font-size: 15px; background: var(--white);
}
.tabla-comparativa th, .tabla-comparativa td {
  border: 1px solid var(--gray-line); padding: 12px 14px; text-align: left; vertical-align: top;
}
.tabla-comparativa thead th { background: var(--teal-darker); color: var(--white); font-weight: 700; }
.tabla-comparativa tbody th, .tabla-comparativa tbody td:first-child { background: var(--gray-bg); font-weight: 700; color: var(--ink); }
.tabla-comparativa tbody tr:nth-child(even) td { background: #FbFcFc; }

/* Etiqueta de marca (cuando un bloque habla de una entidad concreta): pastilla. */
.marca-bloque {
  display: inline-block; font-weight: 700; color: var(--teal-darker);
  background: var(--teal-soft); border-radius: 8px; padding: 6px 14px; margin: 0 0 10px; font-size: 15px;
}

/* Imágenes a dos columnas (para artículos futuros) */
.art-imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 26px 0; }
.art-imgs figure { margin: 0; }
.art-imgs img { width: 100%; height: auto; border-radius: 12px; display: block; }
.art-imgs figcaption { font-size: 14px; color: var(--ink-muted); margin-top: 6px; }

/* Apartes con etiqueta (pill): destacado (teal), aviso (coral) y cierre/CTA.
   Caja con relleno y esquinas redondeadas; el acento de color va en el BORDE
   SUPERIOR, no en el lateral izquierdo (patrón trillado de IA). */
.asm-destacado, .asm-aviso, .asm-cierre { border-radius: 14px; padding: 22px 24px; margin: 26px 0; }
.asm-destacado { background: var(--teal-pale); border-top: 4px solid var(--teal); }
.asm-aviso { background: var(--coral-soft); border-top: 4px solid var(--coral); }
.asm-cierre { background: var(--gray-bg); border-top: 4px solid var(--gold); }
.asm-destacado p, .asm-aviso p, .asm-cierre p { font-size: 17px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 14px; }
.asm-destacado p:last-child, .asm-aviso p:last-child, .asm-cierre p:last-child { margin-bottom: 0; }
.asm-destacado .tabla-scroll { margin: 16px 0; }
.asm-destacado .tabla-comparativa { min-width: 0; }
p.asm-pill {
  display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--white); background: var(--teal-dark);
  border-radius: 999px; padding: 4px 14px; margin: 0 0 12px;
}
p.asm-pill--coral { background: var(--coral-dark); }

/* Dato destacado: cifra grande sobre fondo dorado de marca (borde completo). */
.asm-dato { background: var(--gold-soft); border: 1px solid #E6C680; border-radius: 14px; padding: 22px 24px; margin: 26px 0; }
.asm-dato p { font-size: 17px; line-height: 1.6; color: var(--ink-soft); margin: 0; }
.asm-dato p.asm-dato__cifra { font-size: 44px; font-weight: 700; line-height: 1.1; color: var(--ink); margin: 0 0 10px; }

/* Sí/No con color en celdas de tabla (la información clave de la fila) */
.tabla-comparativa .asm-si { color: var(--teal-dark); }
.tabla-comparativa .asm-no { color: var(--coral-dark); }

/* Nota al pie del artículo (o de una caja): gris pequeño */
p.asm-nota { font-size: 15px; color: var(--ink-muted); }

@media (max-width: 680px) {
  .cajas-comparacion, .art-imgs { grid-template-columns: 1fr; }
  .asm-dato p.asm-dato__cifra { font-size: 34px; }
}

/* =============================================================
 * PÁGINAS LEGALES + BANNER DE COOKIES
 * ============================================================= */
.prosa-legal { max-width: 820px; }
.prosa-legal h2 { font-size: 30px; margin: 34px 0 12px; }
.prosa-legal h3 { font-size: 22px; margin: 26px 0 10px; }
.prosa-legal h4 { font-size: 17px; margin: 20px 0 8px; }
.prosa-legal p { font-size: 17px; line-height: 1.7; color: var(--ink-soft); margin: 0 0 16px; }
.prosa-legal ul, .prosa-legal ol { margin: 0 0 16px; padding-left: 24px; color: var(--ink-soft); font-size: 17px; line-height: 1.6; }
.prosa-legal li { margin-bottom: 8px; }
.prosa-legal a { color: var(--coral-dark); text-decoration: underline; word-break: break-word; }
.tabla-legal { width: 100%; border-collapse: collapse; min-width: 520px; font-size: 14px; }
.tabla-legal th, .tabla-legal td { border: 1px solid var(--gray-line); padding: 8px 10px; text-align: left; vertical-align: top; }
.tabla-legal th { background: var(--gray-bg); }
.tabla-legal code { font-size: 13px; background: var(--gray-bg); padding: 2px 6px; border-radius: 4px; white-space: nowrap; }
.cookie-tabla-wrap { overflow-x: auto; margin: 0 0 16px; -webkit-overflow-scrolling: touch; }

/* Panel de configuración de cookies dentro de la página legal */
.cookie-panel { border: 1px solid var(--gray-line); border-left: 4px solid var(--teal); border-radius: 10px; background: var(--gray-bg); padding: 22px 24px; margin: 8px 0 28px; }
.cookie-panel h2 { margin-top: 0; }
.cookie-panel .cookie-cats { margin: 16px 0 4px; }
.cookie-panel .cookie-cat { padding: 12px 0; border-top: 1px solid var(--gray-line); }
.cookie-panel .cookie-cat:first-child { border-top: 0; }
.cookie-panel__acciones { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 16px; }
.cookie-panel__ok { margin: 0; font-size: 15px; color: var(--teal-darker); font-weight: 600; }
.prosa-legal__rev { font-size: 14px; color: var(--ink-muted); margin-top: 28px; }

/* Banner de cookies (abajo, fijo) */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  background: var(--white); border-top: 3px solid var(--teal);
  box-shadow: 0 -8px 30px -12px rgba(0,0,0,.25);
}
.cookie-banner__in {
  max-width: var(--max-w); margin: 0 auto; padding: 18px 24px;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap; justify-content: space-between;
}
.cookie-banner__txt { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-soft); flex: 1 1 340px; }
.cookie-banner__txt a { color: var(--coral-dark); text-decoration: underline; }
.cookie-banner__btns { display: flex; gap: 12px; flex: 0 0 auto; }
@media (max-width: 560px) {
  .cookie-banner__in { padding: 14px 18px; }
  .cookie-banner__btns { width: 100%; }
  .cookie-banner__btns .btn { flex: 1; text-align: center; }
}

/* =============================================================
 * EMPRESAS COLABORADORAS
 * ============================================================= */
.section--empresas .last-word .word-deco path { fill: var(--coral); }
.empresas-grid { list-style: none; padding: 0; margin: 42px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.empresa-card {
  border: 1px solid var(--gray-line); border-radius: 16px; padding: 26px 24px;
  background: var(--white); display: flex; flex-direction: column; gap: 12px; align-items: flex-start;
}
.empresa-card__link { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.empresa-card__link:hover { text-decoration: none; }
.empresa-card__mono, .empresa-head__mono {
  border-radius: 14px; display: grid; place-items: center; font-weight: 700; flex: 0 0 auto;
  color: var(--ink); /* iniciales en tinta oscura sobre baldosas vivas (AA ≥6:1) */
}
.empresa-card__mono { width: 56px; height: 56px; font-size: 22px; }
.empresa-card__mono--coral, .empresa-head__mono--coral { background: var(--coral); }
.empresa-card__mono--teal { background: var(--teal); }
.empresa-card__mono--orange { background: var(--orange); }
/* Baldosa oscura → iniciales en blanco */
.empresa-card__mono--teal-dark, .empresa-head__mono--teal-dark { background: var(--teal-darker); color: var(--white); }
/* Logo de marca (imagotipo horizontal): altura fija, ancho natural contenido. */
.empresa-card__logo { height: 46px; max-width: 220px; display: flex; align-items: center; flex: 0 0 auto; }
.empresa-card__logo img { max-height: 100%; max-width: 100%; width: auto; height: auto; }
.empresa-card__nombre { font-size: 20px; font-weight: 700; color: var(--ink); }
.empresa-card__loc { display: flex; align-items: center; gap: 8px; color: var(--ink-muted); font-size: 14px; margin: 0; }
.empresa-card__loc svg { width: 18px; height: 18px; color: var(--coral); }
.empresa-card__ben { color: var(--ink-soft); font-size: 15px; line-height: 1.5; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.empresa-card .leer-mas { margin-top: auto; }

/* Cabecera de ficha: solo texto (el logo se muestra más abajo, entre la
   introducción y "Qué hacen"). Aire respecto a las migas de pan y el h1 como
   título propio de la página. */
.empresa-head { margin: 30px 0 20px; }
.empresa-head h1 { margin: 0; font-size: var(--t-h1); line-height: 1.1; }
.empresa-head__meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 16px 0 0; }

/* Logo de la empresa: bloque centrado con aire vertical generoso. */
.empresa-logo { display: flex; justify-content: center; margin: 40px 0; }
.empresa-logo img { max-height: 96px; max-width: 280px; width: auto; height: auto; }
.empresa-logo .empresa-head__mono { width: 96px; height: 96px; border-radius: 20px; font-size: 36px; }
.empresa-head__loc { display: flex; align-items: center; gap: 6px; color: var(--ink-muted); font-size: 15px; }
.empresa-head__loc svg { width: 18px; height: 18px; color: var(--coral); }
.empresa-ventajas { margin: 0 0 30px; padding: 0; list-style: none; display: grid; gap: 12px; }
.empresa-ventajas li { position: relative; padding-left: 30px; color: var(--ink-soft); font-size: 17px; line-height: 1.6; }
.empresa-ventajas li::before { content: ""; position: absolute; left: 0; top: .35em; width: 18px; height: 18px; border-radius: 50%; background: var(--teal-soft); border: 3px solid var(--teal); }
.empresa-contacto { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.empresa-contacto .btn { display: inline-flex; align-items: center; gap: 10px; }
.empresa-contacto .btn svg { width: 20px; height: 20px; }
.empresa-contacto__tel { display: flex; align-items: center; gap: 8px; color: var(--ink-soft); margin: 0; }
.empresa-contacto__tel svg { width: 20px; height: 20px; color: var(--coral); }

.empresa-head__anio { color: var(--ink-muted); font-size: 15px; }
.empresa-sobre { margin: 8px 0 26px; }
.empresa-sobre p { font-size: 17px; line-height: 1.7; color: var(--ink-soft); margin: 0 0 16px; }
.empresa-servicios { list-style: none; padding: 0; margin: 0 0 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 26px; }
.empresa-servicios li { border-left: 3px solid var(--teal); padding-left: 14px; }
.empresa-servicios__t { display: block; font-weight: 700; color: var(--ink); }
.empresa-servicios__d { display: block; color: var(--ink-soft); font-size: 15px; line-height: 1.5; margin-top: 3px; }

@media (max-width: 900px) { .empresas-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .empresa-servicios { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .empresas-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .blog-layout { grid-template-columns: 1fr; gap: 26px; }
  .blog-filtros { position: static; }
}

/* Pantallas anchas: el cuerpo se centra a su ancho de lectura y el índice flota,
   pegado (sticky), en el margen izquierdo, aprovechando el espacio lateral. */
@media (min-width: 1100px) {
  .articulo__grid-wrap { max-width: 1360px; }
  .articulo__grid {
    display: grid;
    grid-template-columns: 1fr minmax(0, 760px) 1fr;
    column-gap: 40px;
    align-items: start;
  }
  .toc { grid-column: 1; justify-self: end; width: 220px; max-width: 220px; margin: 0; position: sticky; top: 100px; }
  .toc__box { background: none; padding: 0; }
  .toc__title { padding: 0 0 12px; pointer-events: none; }
  .toc__title::after { display: none; }
  .articulo__cuerpo { grid-column: 2; max-width: none; margin: 0; }
}
@media (max-width: 560px) {
  .post-row { grid-template-columns: 92px 1fr; gap: 16px; }
  .post-row__media img { width: 92px; height: 92px; }
  .prosa-articulo p, .prosa-articulo ul, .prosa-articulo ol { font-size: 18px; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .media-row { gap: 40px; }
  .circulo { max-width: 320px; }
  .servicios-tres { gap: 40px; }
}
@media (max-width: 760px) {
  .media-row,
  .media-row--text-left { grid-template-columns: 1fr; gap: 28px; }
  .media-row__media { order: -1; margin: 0 auto; max-width: 300px; }
  .home-hero { padding: 28px 0 52px; }
  .servicios-tres { gap: 32px; }
}

/* =============================================================
 * PÁGINAS DE ESTADO: 404 Y GRACIAS
 * -------------------------------------------------------------
 * Cabecera centrada (número 404 grande o marca de "recibido") + una
 * rejilla de "destinos" para reconducir la navegación. Comparten estilo
 * porque cumplen la misma función: no dejar a nadie en un callejón.
 * ============================================================= */
.error-pagina { text-align: center; padding: 56px 0 80px; }
.error-pagina .container { display: block; }
.error-pagina__num {
  font-family: var(--f-script);
  font-size: clamp(110px, 22vw, 220px); line-height: .9;
  color: var(--coral); margin: 0 0 4px;
}
.error-pagina__marca {
  display: inline-grid; place-items: center; width: 96px; height: 96px;
  border-radius: 50%; background: var(--teal-pale); color: var(--teal-darker);
  margin: 0 auto 22px;
}
.error-pagina__marca svg { width: 48px; height: 48px; }
.error-pagina__title { font-size: var(--t-h1); line-height: 1.1; margin: 0 0 18px; }
.error-pagina__lead {
  font-size: var(--t-body); line-height: var(--lh-body); color: var(--ink-soft);
  max-width: 60ch; margin: 0 auto;
}
.error-pagina__lead a { color: var(--coral-dark); font-weight: 700; }
.error-pagina .dashed-divider { margin: 40px auto 34px; }

.destinos__t { font-size: var(--t-h3); margin: 0 0 22px; }
.destinos {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
  text-align: left; max-width: 720px; margin-inline: auto;
}
.destino {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 20px; border: 1px solid var(--gray-line); border-radius: 14px;
  background: var(--white); color: var(--ink); text-decoration: none;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.destino:hover, .destino:focus-visible {
  border-color: var(--coral); box-shadow: 0 10px 26px -16px rgba(0,0,0,.35);
  transform: translateY(-2px);
}
.destino__ic {
  flex: 0 0 auto; display: inline-grid; place-items: center;
  width: 48px; height: 48px; border-radius: 12px;
  background: var(--teal-soft); color: var(--teal-darker);
}
.destino__ic svg { width: 26px; height: 26px; }
.destino__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.destino__t { font-weight: 700; font-size: 17px; }
.destino__d { font-size: 14px; color: var(--ink-muted); line-height: 1.4; }
.destino__flecha { margin-left: auto; color: var(--coral); font-size: 22px; flex: 0 0 auto; transition: transform .18s; }
.destino:hover .destino__flecha, .destino:focus-visible .destino__flecha { transform: translateX(4px); }

@media (max-width: 560px) {
  .destinos { grid-template-columns: 1fr; }
  .error-pagina { padding: 40px 0 60px; }
}