/* ═══════════════════════════════════════════════════════════════════════
   NotarIA — componentes propios de las páginas interiores.

   Se carga después de notaria.css en por-que-notaria.html y en
   proteccion-de-datos.html. Aquí vive lo que el sistema no cubre:
   la portada de página interior, la comparativa, la tabla de datos
   formales y el bloque de cierre.

   Nada de esto puede vivir en un atributo `style`: en la versión
   anterior había 95 estilos en línea y ningún punto de corte podía
   recomponer la página en pantallas pequeñas.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══ Portada de página interior ════════════════════════════════════
   Ritmo comprimido: la portada de una página de profundización no
   necesita la altura de la portada del sitio. */
/* Media portada: aquí la persona ya entró y lo que busca es el
   contenido, no otra presentación. El colchón inferior se recorta
   porque la sección siguiente trae el suyo propio y entre las dos
   dejaban una banda vacía de más de 120 px. */
.portada{position:relative;overflow:hidden;
  padding-block:clamp(28px,3.2vw,44px) clamp(34px,3.8vw,52px)}
.sobre{position:relative}
.orbe-sup{width:min(560px,68vw);aspect-ratio:1;top:-42%;right:-12%}
.portada .migas{margin-bottom:clamp(22px,2.4vw,32px)}
.portada .et{margin-top:0}
/* Las dos columnas del hero interior se centran entre sí, igual que en
   la portada del sitio. Alineadas por abajo, el titular de 60 px y la
   entradilla de 20 px dejaban un hueco de 165 px sobre el párrafo: era
   lo que hacía que la mitad derecha se viera flotando y vacía. */
.portada .dupla{align-items:center;margin-top:clamp(18px,2vw,26px)}
.portada .dupla>*+*{margin-bottom:0}
/* La línea de apoyo va en su propio renglón bajo los botones, como en la
   portada. Estaba metida en la fila de botones, así que en tres páginas
   flotaba a media altura junto al CTA y en la portada no. */
.acc-nota{margin-top:var(--e4)}

/* Ruta de navegación. */
.migas{display:flex;align-items:center;gap:var(--e2);font-size:var(--t-2);color:var(--tx-3)}
.migas a{border-bottom:1px solid transparent;
  transition:color var(--v-1),border-color var(--v-1)}
.migas a:hover{color:var(--tx);border-bottom-color:currentColor}
.migas b{font-weight:400;color:var(--tx)}

/* ═══ Composición ═══════════════════════════════════════════════════ */
.dupla-fin{align-items:end}
.dupla-ini{align-items:start}
.dupla-fin>*+*{margin-bottom:var(--e1)}
/* `.acc-tope` vive en notaria.css: el encabezado es el mismo en las cinco. */
/* Fila de acciones: botón, botón secundario y línea de apoyo. */
/* Mismo ritmo que en la portada: `.acciones` estaba declarado con dos
   separaciones distintas según la hoja que cargara la página. */
.acciones{display:flex;flex-wrap:wrap;align-items:center;
  gap:clamp(14px,1.8vw,24px);margin-top:var(--e6)}

/* Párrafo editorial de apoyo, fuera del componente de entradilla. */
.parr{font-size:var(--t-4);line-height:1.65;max-width:60ch;margin-top:var(--e4)}
.parr+.parr{margin-top:var(--e3)}
.parr b{font-weight:500}
.claro .parr b,.blanco .parr b,.bruma .parr b{color:var(--marino)}

/* Bloque de apoyo separado por filete. */
.nota{border-top:1px solid var(--linea);margin-top:var(--e6);padding-top:var(--e5)}
.claro .nota,.blanco .nota,.bruma .nota{border-top-color:var(--linea-c)}
.nota .enl{margin-top:var(--e2)}

/* El acordeón abre con filete para cerrar la columna por arriba. */
.acordeon{border-top:1px solid var(--linea)}
.claro .acordeon,.blanco .acordeon,.bruma .acordeon{border-top-color:var(--linea-c)}

/* Tarjeta con icono y titular propio. */
.tarj>.ic{margin-bottom:var(--e4)}
.tarj h3{margin-bottom:var(--e2)}

/* `.puntos` vive en notaria.css, junto a `.ctrl`: la portada también lo
   usa y no carga esta hoja. */

/* ═══ Comparativa punto por punto ═══════════════════════════════════
   Tabla real, con encabezados de fila y de columna: quien navega con
   lector de pantalla necesita saber de qué columna es cada respuesta. */
.vs{width:100%;border-collapse:separate;border-spacing:0;margin-top:var(--e6);
  background:var(--blanco);border:1px solid var(--linea-c);
  border-radius:var(--r-3);overflow:hidden;font-size:var(--t-3)}
.vs th,.vs td{text-align:left;vertical-align:top;line-height:1.55;
  padding:var(--e3) var(--e4);border-bottom:1px solid var(--linea-c)}
.vs thead th{background:var(--bruma);font-weight:500;font-size:var(--t-2);
  color:var(--marino);letter-spacing:.01em}
.vs th:first-child{width:36%}
.vs tbody th{font-weight:500;color:var(--marino)}
.vs .vs-no{color:var(--gris)}
.vs .vs-si{color:var(--tea-os);font-weight:500}
.vs .vs-marca{background:rgba(6,114,122,.06)}
.vs thead .vs-marca{background:rgba(6,114,122,.12)}
.vs tbody tr:last-child th,.vs tbody tr:last-child td{border-bottom:0}

/* ═══ Mecanismos legales ════════════════════════════════════════════
   Ocho artículos en dos columnas, con filete a la izquierda. Sin caja:
   es texto para leer, no fichas para ojear. */
.mecs{margin-top:var(--e7);gap:var(--e7) var(--medianil)}
.mecs h3{margin-bottom:var(--e3);max-width:32ch}
.mecs p{font-size:var(--t-3);line-height:1.65;color:var(--gris);max-width:62ch}
.mecs p+p{margin-top:var(--e3)}

/* ═══ Tabla de datos formales ═══════════════════════════════════════ */
.tabla{width:100%;border-collapse:collapse;font-size:var(--t-3)}
.tabla th,.tabla td{text-align:left;vertical-align:top;padding:var(--e3) 0;
  border-bottom:1px solid var(--linea-c)}
.tabla th{width:38%;font-weight:500;color:var(--marino)}
.tabla td{color:var(--gris)}
.tabla tr:last-child th,.tabla tr:last-child td{border-bottom:0}
/* Campo deliberadamente vacío: se publica cuando la información legal
   esté validada. Un dato de ejemplo frente a un fedatario es un riesgo. */
.pend{display:inline-block;padding:2px 9px;border:1px dashed rgba(10,27,51,.3);
  border-radius:var(--r-1);font-size:var(--t-2);color:var(--gris);
  background:rgba(10,27,51,.03)}
.tabla+.micro{margin-top:var(--e5)}

/* ═══ Cierre de página ══════════════════════════════════════════════ */
.cierre{text-align:center;border-top:1px solid var(--linea);
  margin-top:var(--e8);padding-top:var(--e8)}
.claro .cierre,.blanco .cierre,.bruma .cierre{border-top-color:var(--linea-c)}
.cierre h2{max-width:22ch;margin-inline:auto}
.cierre .entra{margin:var(--e4) auto 0}
.cierre .acciones{justify-content:center}
.cierre .micro{margin-top:var(--e4)}

/* El pie y la barra de móvil son idénticos en las cinco páginas:
   `.pie-sec`, `.pie-txt`, `.pie .enl`, `.movil-ic` y `.movil-b` viven en
   notaria.css, que es la única hoja que cargan todas. */

/* ═══ Puntos de corte ═══════════════════════════════════════════════ */
@media (max-width:1080px){
  .dupla-fin>*+*{margin-bottom:0}
  .mecs{gap:var(--e6) var(--medianil)}
}
@media (max-width:820px){
  /* La comparativa deja de ser tabla: cada situación pasa a ser una
     ficha legible, con el nombre de cada columna delante de su dato. */
  .vs,.vs tbody,.vs tr,.vs th,.vs td{display:block;width:auto}
  .vs{border-radius:var(--r-2)}
  .vs thead{display:none}
  .vs tr{border-bottom:1px solid var(--linea-c)}
  .vs tr:last-child{border-bottom:0}
  .vs tbody th{background:var(--marino);color:#fff;font-size:var(--t-2);
    padding:var(--e2) var(--e4);border-bottom:0}
  .vs td{border-bottom:0;padding:var(--e2) var(--e4)}
  .vs tr td:last-child{padding-bottom:var(--e3)}
  .vs .vs-marca,.vs tbody tr:last-child td{background:transparent}
  .vs .vs-no::before{content:"Chatbot: ";color:var(--gris);font-weight:500}
  .vs .vs-si::before{content:"NotarIA: ";color:var(--tea-os);font-weight:500}
  .cierre{margin-top:var(--e7);padding-top:var(--e7)}
}
@media (max-width:560px){
  /* La tabla de datos se apila: a 360 px, dos columnas dejaban la
     etiqueta en cuatro renglones y el dato en uno. */
  .tabla,.tabla tbody,.tabla tr,.tabla th,.tabla td{display:block;width:auto}
  .tabla tr{border-bottom:1px solid var(--linea-c);padding-block:var(--e3)}
  .tabla tr:last-child{border-bottom:0}
  .tabla th,.tabla td{border-bottom:0;padding:0}
  .tabla td{margin-top:var(--e1)}
}

/* ═══ Cierre en superficie propia ═══════════════════════════════════
   En capacidades.html y tramites.html el cierre no comparte sección con
   nada: ocupa su propio plano claro. Ahí el filete y la pausa de arriba
   sobran, porque el cambio de superficie ya hace ese trabajo. */
.cierre-solo{border-top:0;margin-top:0;padding-top:0}
/* El cintillo es una fila flexible: sin esto se queda a la izquierda
   dentro de un bloque centrado. */
.cierre .et{justify-content:center}

/* ═══ Páginas con pestañas ══════════════════════════════════════════ */
@media (max-width:820px){
  /* La tira de pestañas sangra hasta el borde y se desvanece a la
     derecha: a 320 px se ve que hay más frentes de los que caben. */
  /* Sin sangrado negativo. Sacaba la tira de pestañas hasta 40 px a la
     izquierda del titular de su propia sección; el degradado del borde
     derecho basta para indicar que hay más pestañas al desplazar. */
  .tabs{-webkit-mask:linear-gradient(90deg,#000 calc(100% - 34px),transparent);
    mask:linear-gradient(90deg,#000 calc(100% - 34px),transparent)}
  /* `header .in .b-sm{display:none}` vive ahora en notaria.css. */
  /* Los CTA largos del cierre envuelven en vez de desbordar. */
  .cierre .b{white-space:normal;line-height:1.35;text-wrap:balance;padding-block:12px}
  /* Área táctil de 44 px en la ruta de navegación. */
  .migas a{min-height:44px;display:inline-flex;align-items:center}
}