/* Base común a las 3 propuestas: paleta corporativa, reinicio y piezas compartidas. */
:root {
  --azul: #345f95;          /* banda del logo / tarjetas de presentación */
  --azul-oscuro: #22416a;
  --azul-claro: #e9eff7;
  --amarillo: #fdc003;      /* estrellas del logo: solo acentos */
  --negro: #14171c;
  --texto: #2b3038;
  --gris: #6b7380;
  --linea: #dfe3ea;
  --fondo: #ffffff;
  --fondo-alt: #f5f7fa;
  --radio: 6px;
  --ancho: 1160px;
  --fuente-texto: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fuente-titulos: var(--fuente-texto);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fondo); color: var(--texto); font-family: var(--fuente-texto); font-size: 17px; line-height: 1.65; padding-bottom: 52px; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--azul); }
h1, h2, h3, h4 { font-family: var(--fuente-titulos); color: var(--negro); line-height: 1.2; margin: 0 0 .6em; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; }
.icono { width: 1.4em; height: 1.4em; flex: none; }

.contenedor { width: min(var(--ancho), 100% - 32px); margin-inline: auto; }
section[id] { scroll-margin-top: 90px; }

/* Marca: emblema PNG + nombre en texto real (D4) */
.marca { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.marca-emblema { width: 54px; height: auto; }
.marca-texto { display: flex; flex-direction: column; line-height: 1.1; }
.marca-nombre { font-family: var(--fuente-titulos); font-weight: 700; font-size: 1.35rem; color: var(--negro); letter-spacing: .02em; }
.marca-sub { font-size: .78rem; color: var(--gris); letter-spacing: .08em; text-transform: uppercase; }

/* Botones */
.boton { display: inline-flex; align-items: center; gap: .5em; background: var(--azul); color: #fff; border: 2px solid var(--azul); padding: .7em 1.4em; border-radius: var(--radio); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.boton:hover { background: var(--azul-oscuro); border-color: var(--azul-oscuro); }
.boton-sec { background: transparent; color: #fff; border-color: #fff; }
.boton-sec:hover { background: rgba(255,255,255,.12); border-color: #fff; }

/* Menú móvil (común): el botón se muestra por debajo de 900px */
[data-menu-toggle] { display: none; background: none; border: 1px solid var(--linea); border-radius: var(--radio); padding: .45em .8em; font: inherit; cursor: pointer; color: inherit; }
@media (max-width: 899px) {
  [data-menu-toggle] { display: inline-block; }
  /* «html» sube la especificidad por encima de las reglas de menú de cada propuesta */
  html .navegacion .menu-lista { display: none; }
  html.menu-abierto .navegacion .menu-lista { display: flex; flex-direction: column; width: auto; }
}
.menu-lista { list-style: none; }

/* Carrusel */
.carrusel { position: relative; overflow: hidden; }
.slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity .8s; display: flex; align-items: center; }
.slide.activo { opacity: 1; position: relative; }
.carrusel-puntos { position: absolute; bottom: 18px; left: 0; right: 0; display: flex; justify-content: center; gap: 10px; }
.punto { width: 11px; height: 11px; border-radius: 50%; border: 2px solid #fff; background: transparent; padding: 0; cursor: pointer; }
.punto.activo { background: var(--amarillo); border-color: var(--amarillo); }

/* Especialidades: listas */
.bloque-lista { list-style: none; }
.bloque-titulos { display: flex; flex-direction: column; }
.bloque-sub { font-size: .85rem; font-weight: 400; color: var(--gris); font-family: var(--fuente-texto); }
.bloque-cab { display: flex; align-items: center; gap: 12px; }
.dig-lista { display: grid; gap: 20px; }
.dig { display: grid; grid-template-columns: 1fr; background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; }
.dig-imagen { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.dig-texto { padding: 18px 20px 6px; }
.dig h4 { font-size: 1.05rem; }
.dig p { font-size: .95rem; }
@media (min-width: 700px) { .dig-lista { grid-template-columns: 1fr 1fr; } .dig:last-child:nth-child(odd) { grid-column: 1 / -1; } }
details.bloque > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 12px; }
details.bloque > summary::-webkit-details-marker { display: none; }

/* Contacto (D11): tres piezas — información, formulario y mapa — que cada propuesta coloca a su manera.
   Por defecto (móvil) se apilan: información → formulario → mapa. */
.contacto { display: grid; gap: 24px; grid-template-areas: "info" "form" "mapa"; }
.contacto-info { grid-area: info; }
.formulario { grid-area: form; }
.contacto-mapa { grid-area: mapa; }
.contacto-cab { font-size: 1.15rem; margin-bottom: 1em; }
.datos { list-style: none; display: grid; gap: 16px; }
.dato { display: flex; align-items: center; gap: 14px; }
.dato-icono { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--azul-claro); color: var(--azul); }
.dato-icono .icono { width: 20px; height: 20px; }
.dato-texto { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.dato-etiqueta { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--gris); }
.dato-texto a, .dato-texto > span:last-child { color: var(--negro); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.dato-texto a:hover { color: var(--azul); }

.mapa { width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: var(--fondo-alt); }
.mapa iframe { width: 100%; height: 100%; border: 0; display: block; }
.mapa-enlace { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-weight: 600; font-size: .92rem; }
.mapa-enlace .icono { width: 1em; height: 1em; }

.formulario { display: grid; gap: 18px; align-content: start; }
.campos-fila { display: grid; gap: 18px; }
@media (min-width: 600px) { .campos-fila { grid-template-columns: 1fr 1fr; } }
.campo { display: grid; gap: 6px; }
.campo-etiqueta { font-size: .85rem; font-weight: 600; color: var(--negro); }
.campo input, .campo textarea { font: inherit; font-size: 1rem; padding: .8em .95em; border: 1px solid var(--linea); border-radius: var(--radio); background: #fff; color: var(--texto); width: 100%; transition: border-color .15s, box-shadow .15s; }
.campo textarea { resize: vertical; min-height: 140px; }
.campo input::placeholder, .campo textarea::placeholder { color: #9aa2ae; }
.campo input:focus, .campo textarea:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(52, 95, 149, .18); }
.formulario-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.formulario-pie .boton .icono { width: 1.1em; height: 1.1em; }
.campo-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-aviso-error { border-left-color: #c0392b; background: #fdecea; }
.formulario button[disabled] { opacity: .6; cursor: progress; }
.formulario-nota { font-size: .85rem; color: var(--gris); }
.form-aviso { margin: 0; padding: .8em 1em; border-left: 4px solid var(--amarillo); background: #fff8e1; color: var(--negro); border-radius: 0 var(--radio) var(--radio) 0; }

/* Director */
.director { display: grid; gap: 32px; }
.director-foto img { width: 100%; max-width: 320px; border-radius: var(--radio); }
.director-eyebrow { text-transform: uppercase; letter-spacing: .1em; font-size: .8rem; color: var(--azul); font-weight: 700; margin-bottom: .3em; }
.director-cargo { color: var(--gris); margin-top: -.3em; }
.director-titulos { list-style: none; display: grid; gap: 8px; }
.director-titulos li { padding-left: 1.6em; position: relative; }
.director-titulos li::before { content: ""; position: absolute; left: 0; top: .55em; width: .7em; height: .7em; background: var(--amarillo); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.director-final { margin-top: 1.6em; }
.director-titulos-cab { font-size: 1.15rem; margin-top: 1.4em; }
@media (min-width: 800px) { .director { grid-template-columns: 300px 1fr; align-items: start; } }

/* Pie */
.pie-marca { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.pie-marca img { width: 36px; }

/* Aviso de propuesta (fijo, discreto) */
.aviso-propuesta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 100; display: flex; justify-content: center; align-items: center; gap: 18px; flex-wrap: wrap; padding: 8px 16px; background: rgba(20, 23, 28, .92); color: #fff; font: 14px/1.3 system-ui, sans-serif; }
.aviso-nav { display: inline-flex; align-items: center; gap: 6px; }
.aviso-nav a, .aviso-actual { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: #fff; text-decoration: none; border: 1px solid rgba(255,255,255,.5); }
.aviso-nav a:hover { background: rgba(255,255,255,.15); }
@media (max-width: 459px) { .aviso-nombre { display: none; } .aviso-propuesta { gap: 12px; } }
.aviso-actual { background: var(--amarillo); border-color: var(--amarillo); color: var(--negro); font-weight: 700; }