/* ==========================================================================
   ESTILOS DEL SITIO · rodriguezmarte.com
   Lo que solo tiene este sitio: la portada de una sola página (templates/paginas/landing.php,
   ADR 0016) y el logo oficial. Va después de estilos.css, que queda como en la plantilla para poder
   traer sus cambios. Colores y fuentes solo con los tokens de tokens.css.
   ========================================================================== */

/* El encabezado fijo no tapa el título de la sección a la que lleva el menú. */
.ancla { scroll-margin-top: 96px; }
/* Sin guiones de corte en los títulos de este sitio; una palabra larga igual se parte (overflow-wrap). */
h1, h2 { hyphens: manual; }

/* ---------- Logo: el PNG transparente oficial, sobre una placa blanca (su texto gris no se lee sobre fondo oscuro) ---------- */
.logo__placa { display: block; background: var(--placa-logo); border-radius: var(--radio-sm); }
.logo .logo__placa { height: 64px; width: auto; padding: var(--e-1); }
.logo-pie .logo__placa { width: auto; height: 120px; padding: var(--e-2); margin-bottom: var(--e-4); }

/* ---------- Héroe con la foto de portada ---------- */
.hero .hero__imagen img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero { min-height: 78vh; }
.hero h1 { max-width: 20em; }
.hero__eslogan::before { background: var(--naranja); height: 2px; }

/* ---------- Franja de datos ---------- */
.datos { background: var(--franja); color: var(--sobre-franja); border-top: 3px solid var(--naranja); }
.datos__lista { list-style: none; padding: var(--e-8) 0; margin-block: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-6); }
.datos__lista li { display: grid; gap: var(--e-1); padding-left: var(--e-4); border-left: 2px solid var(--acento-claro); }
.datos__lista strong { font-size: var(--t-lg); }
.datos__lista span { font-size: var(--t-sm); color: var(--crema-80); }

/* ---------- Servicios como filas de libro contable ---------- */
.libro { list-style: none; padding: 0; margin: var(--e-8) 0 0; border-top: 2px solid var(--texto); }
.libro__fila {
  display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto; gap: var(--e-6); align-items: start;
  padding-block: var(--e-6); border-bottom: 1px solid var(--borde);
}
.libro__codigo { font-family: var(--fuente-codigo); font-size: var(--t-xl); font-weight: 700; color: var(--naranja); padding-top: 2px; }
/* El naranja solo como texto grande (22 px en negrita): 4,2:1 sobre Menta pasa AA para texto grande. */
.libro__fila h3 { font-size: var(--t-xl); margin-bottom: var(--e-2); }
.libro__fila p { margin: 0; color: var(--texto-suave); max-width: 46em; }
.libro__consultar { align-self: center; font-weight: 700; font-size: var(--t-sm); color: var(--enlace); text-decoration: underline; text-underline-offset: 4px; white-space: nowrap; }
.libro__consultar:hover { color: var(--enlace-hover); }

/* ---------- Calendario fiscal ---------- */
.calendario { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--e-12); align-items: start; }
.calendario__nota { font-size: var(--t-sm); color: var(--texto-suave); }
.calendario__tabla { overflow-x: auto; }
.calendario__tabla table { width: 100%; border-collapse: collapse; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); }
.calendario__tabla th, .calendario__tabla td { text-align: left; padding: var(--e-4); border-bottom: 1px solid var(--borde); vertical-align: top; }
.calendario__tabla thead th { font-size: var(--t-xs); letter-spacing: var(--espaciado-mayus); text-transform: uppercase; color: var(--texto-suave); }
.calendario__tabla tbody th { width: 5.5rem; font-size: var(--t-xl); font-weight: 700; background: var(--resalte); color: var(--sobre-resalte); }
.calendario__tabla tbody tr:last-child > * { border-bottom: 0; }

/* ---------- Nosotros: perfil del socio y pilares ---------- */
.perfil { border-left: 3px solid var(--naranja); padding-left: var(--e-6); margin-block: var(--e-6); }
.perfil h3 { font-size: var(--t-xl); margin-bottom: var(--e-1); }
.perfil__cargo { color: var(--texto-suave); font-weight: 500; }
.perfil ul { padding-left: 1.1em; margin: 0; display: grid; gap: var(--e-2); }
.pilares__titulo { font-size: var(--t-base); margin: var(--e-8) 0 0; }

/* ---------- Contacto ---------- */
.tarjeta-whatsapp {
  display: flex; justify-content: space-between; align-items: center; gap: var(--e-6); flex-wrap: wrap;
  background: var(--superficie); border: 1px solid var(--borde); border-left: 4px solid var(--whatsapp);
  border-radius: var(--radio); padding: var(--e-8); margin-top: var(--e-8); box-shadow: var(--sombra);
}
.tarjeta-whatsapp > div { min-width: 0; }
.tarjeta-whatsapp h3 { font-size: var(--t-xl); margin-bottom: var(--e-2); }
.tarjeta-whatsapp p { margin: 0; color: var(--texto-suave); }
/* Dos columnas (una en pantallas angostas): con cinco tarjetas en fila, el correo se partía en «Gerencia@rodriguezmarte.» / «com». */
.datos-contacto { list-style: none; padding: 0; margin: var(--e-6) 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-4); }
.datos-contacto li { display: flex; gap: var(--e-3); background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: var(--e-6); min-width: 0; }
.datos-contacto svg { width: 22px; height: 22px; color: var(--naranja); flex-shrink: 0; }
.datos-contacto h3 { font-size: var(--t-xs); letter-spacing: var(--espaciado-mayus); text-transform: uppercase; color: var(--texto-suave); margin-bottom: var(--e-2); }
.datos-contacto p { margin: 0; font-size: var(--t-sm); }
.datos-contacto a { color: var(--enlace); font-weight: 700; font-size: var(--t-sm); overflow-wrap: anywhere; }
.datos-contacto li > div { min-width: 0; } /* sin esto, el correo no se parte y desborda a 320 px */
.datos-contacto .datos-contacto__correo { font-size: var(--t-base); overflow-wrap: break-word; }
/* Teléfonos y horario: el nombre (tipo de teléfono o días) arriba en negrita y el dato debajo. */
.datos-contacto dl { margin: 0; display: grid; gap: var(--e-3); font-size: var(--t-sm); }
.datos-contacto dt { font-weight: 700; }
.datos-contacto dd { margin: 0; }
.mapa {
  display: flex; justify-content: space-between; align-items: center; gap: var(--e-6); flex-wrap: wrap;
  border: 1px dashed var(--borde-campo); border-radius: var(--radio); padding: var(--e-6); margin-top: var(--e-6);
}
.mapa > div { min-width: 0; }
.mapa h3 { font-size: var(--t-lg); margin-bottom: var(--e-2); }
.mapa p { margin: 0; font-size: var(--t-sm); color: var(--texto-suave); max-width: 40em; }
.mapa__marco { flex-basis: 100%; width: 100%; height: 380px; border: 0; border-radius: var(--radio-sm); }

/* El secundario de la plantilla se rellena de naranja al pasar el ratón: con texto pequeño no llega a AA. */
.boton--secundario { border-color: var(--naranja); }
.boton--secundario:hover { background: var(--primario); border-color: var(--primario); color: var(--sobre-primario); }

/* El correo y los códigos (IT-1, 606…) son palabras largas: con la letra grande a 320 px tienen que poder partirse. */
.pie li, .pie p, main p, main li, main td { overflow-wrap: anywhere; }

/* La etiqueta de acento de la plantilla lleva texto pequeño: con el naranja no llega a AA. */
.etiqueta--dorada { background: var(--amarillo); color: var(--azul-oscuro); }

/* ---------- Pantallas medianas y pequeñas (em, para que la letra grande no rompa nada) ---------- */
@media (max-width: 67.5em) {
  .datos__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calendario { grid-template-columns: minmax(0, 1fr); gap: var(--e-6); }
}
@media (max-width: 45em) {
  .hero { min-height: auto; }
  .datos-contacto { grid-template-columns: minmax(0, 1fr); }
  .libro__fila { grid-template-columns: 3.25rem minmax(0, 1fr); gap: var(--e-4); }
  .libro__consultar { grid-column: 2; justify-self: start; }
  .tarjeta-whatsapp { padding: var(--e-6); }
  .logo .logo__placa { height: 52px; }
  .mapa__marco { height: 300px; }
}
@media (max-width: 30em) {
  .datos__lista { grid-template-columns: minmax(0, 1fr); }
  .tarjeta-whatsapp .boton { width: 100%; white-space: normal; }
  .mapa .acciones { width: 100%; }
  .mapa .boton { flex: 1 1 100%; white-space: normal; }
  .hero .acciones .boton { white-space: normal; }
  /* En pantallas angostas los títulos vuelven a partir palabras, como en la plantilla. */
  h1, h2 { hyphens: auto; }
  .cta--sola > div { min-width: 0; }
  .calendario__tabla th, .calendario__tabla td { padding: var(--e-3); overflow-wrap: anywhere; }
  .calendario__tabla tbody th { width: auto; font-size: var(--t-lg); }
}