/* ============================================================
   RAMAR SOLAR — Servicios especializados para plantas fotovoltaicas
   Hoja de estilos principal

   Marca: azul marino #122B4A · naranja #F96431 · terracota #B26A42
   Los tres salen del manual de logo (RAMAR_Isotipo.png). El terracota es
   el del isotipo impreso; en pantalla las maquetas usan el naranja vivo,
   así que ese manda en botones y acentos y el terracota queda para matices.

   Parentesco con SOCOAM: misma arquitectura de clases (en español), mismo
   ritmo de secciones, misma familia de texto (Barlow) y el mismo motor de
   formulario. Lo que las separa a propósito:
     · paleta      azul/verde  ->  azul marino/naranja
     · geometría   ondas       ->  chevrones a 45° (los del isotipo)
     · titulares   Barlow Condensed en versalitas -> Montserrat en caja baja
     · esquinas    radio 10px  ->  radio 4px, más industrial
     · botones     píldora     ->  rectángulo de esquina suave
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  --azul:        #122B4A;   /* navy del isotipo */
  --azul-osc:    #0C1E36;
  --azul-med:    #1D4373;
  --azul-clr:    #2E5E96;
  --azul-lav:    #EDF2F8;

  --naranja:     #F96431;   /* acento de pantalla: botones, subrayados */
  --naranja-osc: #DB4E1E;
  --naranja-clr: #FF8A5C;
  --naranja-lav: #FFF1EA;
  --terracota:   #B26A42;   /* naranja impreso del isotipo */

  --gris:        #4F5A66;
  --gris-med:    #75818E;
  --gris-sua:    #A3ADB8;
  --borde:       #DDE4EC;
  --fondo:       #FFFFFF;
  --fondo-alt:   #F3F6FA;

  --fuente:      "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fuente-tit:  "Montserrat", "Barlow", system-ui, sans-serif;

  --header-h:    88px;
  --ancho:       1300px;
  --radio:       4px;
  --radio-gr:    8px;

  --deg-azul:    linear-gradient(145deg, #1D4373 0%, #0C1E36 100%);
  --deg-naranja: linear-gradient(145deg, #FF7A45 0%, #E4521F 100%);

  --sombra:      0 2px 12px rgba(18, 43, 74, .07);
  --sombra-alta: 0 16px 40px rgba(18, 43, 74, .15);
  --transicion:  .38s cubic-bezier(.4, 0, .2, 1);

  /* Inclinación del isotipo: sus planos suben a 45°. Todo corte diagonal
     del sitio usa este mismo ángulo para que la geometría sea una sola. */
  --sesgo:       -45deg;
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 12px);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  font-family: var(--fuente);
  font-size: 1.0625rem;
  line-height: 1.68;
  color: var(--gris);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--azul-med); text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
ul, ol { padding: 0; list-style: none; }

h1, h2, h3, h4 {
  font-family: var(--fuente-tit);
  font-weight: 700;
  line-height: 1.13;
  color: var(--azul);
  letter-spacing: -.017em;
  text-wrap: balance;
}
p { text-wrap: pretty; }
strong, b { font-weight: 600; color: inherit; }

/* El titular de dos líneas de las maquetas: la primera en azul, la segunda
   en naranja. Se marca con un <span> para no depender del salto de línea. */
.acento { color: var(--naranja); }

:focus-visible { outline: 3px solid var(--naranja); outline-offset: 3px; border-radius: 2px; }

.salto-contenido {
  position: absolute; left: -9999px; top: 0; z-index: 2000;
  background: var(--azul); color: #fff; padding: .8rem 1.4rem; font-weight: 600;
}
.salto-contenido:focus { left: 12px; top: 12px; }

.solo-lectores {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 3. Utilidades de layout ---------- */
.contenedor { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: 24px; }
.seccion {
  position: relative;
  padding-block: clamp(2.6rem, 4.2vw, 4.2rem);
  overflow: clip;
}
.seccion--alt { background: var(--fondo-alt); }
.seccion--azul { background: var(--deg-azul); color: rgba(255,255,255,.86); }
.seccion--azul h2, .seccion--azul h3 { color: #fff; }
.seccion > .contenedor { position: relative; z-index: 1; }

.eyebrow {
  font-family: var(--fuente);
  font-size: .86rem; font-weight: 600; letter-spacing: .22em;
  text-transform: uppercase; color: var(--naranja);
  display: block; margin-bottom: .7rem;
}
.seccion--azul .eyebrow { color: var(--naranja-clr); }

/* Subrayado de dos tramos (azul + naranja) tomado del material del cliente:
   aparece bajo cada titular de sección en todas las maquetas. */
.titulo-seccion { font-size: clamp(1.8rem, 3vw, 2.6rem); }
.titulo-seccion::after {
  content: ""; display: block; width: 84px; height: 4px; margin-top: 1rem;
  background: linear-gradient(90deg, var(--azul) 0 50%, var(--naranja) 50% 100%);
}
.seccion--azul .titulo-seccion::after {
  background: linear-gradient(90deg, #fff 0 50%, var(--naranja) 50% 100%);
}
.centrado { text-align: center; }
.centrado .titulo-seccion::after { margin-inline: auto; }

.bajada { font-size: 1.06rem; color: var(--gris-med); max-width: 68ch; margin-top: 1rem; }
.seccion--azul .bajada { color: rgba(255,255,255,.8); }
.centrado .bajada { margin-inline: auto; }

/* Justificado sólo en columnas de lectura corrida; en tarjetas angostas
   abre ríos, así que ahí se queda en bandera. */
.duo p, .intro-servicio p, .bloque-servicio__cuerpo > p, .texto-largo p {
  text-align: justify; hyphens: auto; -webkit-hyphens: auto;
}

/* ---------- 4. Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .7rem;
  font-family: var(--fuente); font-size: .95rem; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase;
  padding: .92rem 1.9rem; border-radius: var(--radio); border: 2px solid transparent;
  cursor: pointer; transition: var(--transicion); text-align: center;
}
.btn svg { width: 18px; height: 18px; flex: none; transition: transform var(--transicion); }
.btn:hover svg { transform: translateX(4px); }

.btn--naranja { background: var(--deg-naranja); color: #fff; box-shadow: 0 4px 14px rgba(249,100,49,.28); }
.btn--naranja:hover { background: var(--naranja-osc); box-shadow: 0 8px 24px rgba(249,100,49,.38); }

.btn--azul { background: var(--azul); color: #fff; }
.btn--azul:hover { background: var(--azul-med); box-shadow: var(--sombra-alta); }

.btn--linea { background: transparent; color: var(--azul); border-color: var(--borde); }
.btn--linea:hover { border-color: var(--naranja); color: var(--naranja); background: var(--naranja-lav); }

.btn--fantasma { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn--fantasma:hover { background: #fff; color: var(--azul); border-color: #fff; }

/* Enlace "conoce más" con subrayado naranja, de las maquetas de inicio. */
.enlace-mas {
  display: inline-flex; align-items: center; gap: .7rem;
  font-size: .88rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--azul); padding-bottom: .35rem;
  border-bottom: 2px solid var(--naranja); transition: var(--transicion);
}
.enlace-mas svg {
  width: 26px; height: 26px; padding: 4px; flex: none;
  border: 1.5px solid currentColor; border-radius: 50%; transition: var(--transicion);
}
.enlace-mas:hover { color: var(--naranja); }
.enlace-mas:hover svg {
  transform: translateX(4px); background: var(--naranja);
  border-color: var(--naranja); color: #fff;
}

/* ---------- 5. Geometría de marca: el isotipo como filigrana ---------- */
/* Fondo tenue de secciones. Antes eran franjas diagonales; el cliente pidió
   (21-09-2026) que fuera el isotipo del logo, siempre en gris. El archivo ya
   viene en gris neutro plano, así que aquí sólo se decide el tamaño y cuánto
   se deja ver. El espaciado entre marcas es mayor que la marca misma para que
   la trama respire y no se lea como un papel de regalo. */
.tramado {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: url(../img/marca/trama-isotipo-960.png);
  background-size: clamp(420px, 38vw, 620px) auto;
  background-repeat: repeat;
  opacity: .085;
}
/* Sobre azul la misma filigrana se apaga: el gris queda más claro que el
   fondo, así que se ve más de lo que se vería sobre blanco. */
.seccion--azul .tramado { opacity: .1; }

/* ---------- 6. Header fijo ---------- */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 1000;
  height: var(--header-h);
  background: rgba(255,255,255,.97);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--borde);
  transition: box-shadow var(--transicion);
}
.header.esta-fijo { box-shadow: 0 4px 20px rgba(18,43,74,.10); }

.header__interior {
  height: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 1.2rem;
}
.header__logo { flex: none; display: block; }
.header__logo img { width: clamp(132px, 12.5vw, 168px); }

.nav { display: flex; align-items: center; gap: clamp(.5rem, 1.05vw, 1.15rem); }
.nav__link {
  position: relative;
  font-family: var(--fuente); font-size: clamp(.76rem, .84vw, .86rem); font-weight: 600;
  letter-spacing: .085em; text-transform: uppercase; color: var(--azul);
  padding: .5rem 0; transition: color var(--transicion); white-space: nowrap;
  background: none; border: 0; cursor: pointer;
}
.nav__link::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 0; height: 2px; background: var(--naranja); transition: width var(--transicion);
}
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--naranja); }
.nav__link:hover::after, .nav__link[aria-current="page"]::after { width: 100%; }

/* Submenú de servicios (las maquetas lo muestran con cursor desplegable). */
.nav__grupo { position: relative; }
.nav__link--grupo { display: inline-flex; align-items: center; gap: .38rem; cursor: default; }
.nav__link--grupo svg { width: 11px; height: 11px; transition: transform var(--transicion); }
.nav__grupo:hover .nav__link--grupo,
.nav__grupo:focus-within .nav__link--grupo { color: var(--naranja); }
.nav__grupo:hover .nav__link--grupo::after,
.nav__grupo:focus-within .nav__link--grupo::after { width: 100%; }
.nav__grupo:hover .nav__link--grupo svg,
.nav__grupo:focus-within .nav__link--grupo svg { transform: rotate(180deg); }

.nav__panel {
  position: absolute; left: 50%; top: calc(100% + 14px);
  min-width: 268px; background: #fff; border: 1px solid var(--borde);
  border-top: 3px solid var(--naranja); border-radius: 0 0 var(--radio) var(--radio);
  box-shadow: var(--sombra-alta); padding: .5rem;
  opacity: 0; visibility: hidden; translate: -50% 8px; transition: var(--transicion);
}
.nav__grupo:hover .nav__panel,
.nav__grupo:focus-within .nav__panel { opacity: 1; visibility: visible; translate: -50% 0; }
.nav__panel a {
  display: block; padding: .62rem .9rem; border-radius: var(--radio);
  font-size: .92rem; font-weight: 600; color: var(--azul); transition: var(--transicion);
}
.nav__panel a:hover { background: var(--naranja-lav); color: var(--naranja); }

.header__cta { flex: none; padding: .72rem 1.25rem; font-size: .8rem; letter-spacing: .07em; }

.hamburguesa {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 46px; height: 46px; padding: 0 10px;
  background: none; border: 0; cursor: pointer;
}
.hamburguesa span {
  display: block; height: 2px; background: var(--azul);
  border-radius: 2px; transition: var(--transicion);
}
.hamburguesa[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburguesa[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1180px) {
  .hamburguesa { display: flex; }
  .nav {
    position: fixed; inset: var(--header-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--borde);
    padding: .5rem 24px 1.4rem; max-height: calc(100svh - var(--header-h));
    overflow-y: auto; box-shadow: var(--sombra-alta);
    display: none;
  }
  .nav.esta-abierta { display: flex; }
  .nav__link {
    padding: .85rem 0; border-bottom: 1px solid var(--borde);
    font-size: .92rem; text-align: left;
  }
  .nav__link::after { display: none; }
  .nav__grupo { display: flex; flex-direction: column; }
  .nav__link--grupo { justify-content: space-between; cursor: pointer; }
  .nav__panel {
    position: static; translate: none; opacity: 1; visibility: visible;
    min-width: 0; border: 0; border-left: 3px solid var(--naranja); border-radius: 0;
    box-shadow: none; padding: .2rem 0 .5rem .9rem; margin-left: .2rem;
    display: none;
  }
  .nav__grupo.esta-abierto .nav__panel { display: block; }
  .nav__grupo.esta-abierto .nav__link--grupo svg { transform: rotate(180deg); }
  .header__cta { display: none; }
}

/* ============================================================
   7. HERO DE PORTADA — 3 paneles, la foto cambia al pasar el cursor
   Mismo mecanismo que SOCOAM (capa de fotos con fundido cruzado bajo
   paneles en flex), porque el cliente lo pidió explícitamente: "que al
   posicionar la foto aparezcan los servicios". Lo que cambia es la piel:
   velo azul marino, línea de progreso naranja y el texto que se despliega.
   ============================================================ */
.hero {
  position: relative;
  margin-top: var(--header-h);
  height: calc(100svh - var(--header-h));
  min-height: 560px; max-height: 800px;
  overflow: hidden;
  background: var(--azul-osc);
}
.hero__fotos { position: absolute; inset: 0; z-index: 0; }
.hero__foto { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; will-change: opacity; }
.hero__foto.es-visible { opacity: 1; }
.hero__foto img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.05); transition: transform 8s cubic-bezier(.2,0,.2,1);
}
.hero__foto.es-visible img { transform: scale(1.13); }
@media (prefers-reduced-motion: reduce) {
  .hero__foto img, .hero__foto.es-visible img { transform: none; transition: none; }
}

/* Rótulo superior del hero, sobre los paneles */
.hero__encabezado {
  position: absolute; left: 0; right: 0; top: clamp(1.6rem, 5vh, 3.4rem);
  z-index: 3; text-align: center; padding-inline: 24px; pointer-events: none;
}
.hero__encabezado .eyebrow { color: #fff; opacity: .92; }
/* Con el velo aligerado el texto cae sobre cielo claro, así que la sombra
   lleva dos capas: una cerrada que despega la letra del fondo y otra abierta
   que oscurece el halo. Es lo que mantiene el contraste sin apagar la foto. */
.hero__titulo {
  font-size: clamp(1.9rem, 4vw, 3.15rem); color: #fff; line-height: 1.08;
  text-shadow: 0 1px 3px rgba(8,16,30,.55), 0 2px 26px rgba(8,16,30,.7);
}
.hero__titulo .acento { color: var(--naranja-clr); }
.hero__intro {
  margin: 1rem auto 0; max-width: 62ch; color: #fff;
  font-size: clamp(.96rem, 1.15vw, 1.06rem);
  text-shadow: 0 1px 3px rgba(8,16,30,.75), 0 2px 16px rgba(8,16,30,.7);
}

.hero__paneles { position: relative; z-index: 1; display: flex; height: 100%; }
.hero__panel {
  position: relative; flex: 1 1 33.333%; min-width: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 2rem 1.9rem 3.2rem;
  color: #fff; text-decoration: none;
  border-left: 1px solid rgba(255,255,255,.15);
  isolation: isolate;
}
.hero__panel:first-child { border-left: 0; }
/* En escritorio la foto la pone la capa .hero__fotos; el fondo propio del
   panel se reserva para móvil, donde esa capa no existe. */
@media (min-width: 901px) { .hero__panel { background-image: none !important; } }

/* Velo aligerado (23-09-2026, a pedido del cliente). El peso se concentra
   abajo, detrás del texto del panel; la mitad superior queda casi limpia
   para que se vea la foto. */
.hero__panel::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10,18,32,.06) 0%, rgba(10,18,32,.24) 46%, rgba(8,16,30,.74) 100%);
  transition: background .55s ease;
}
.hero__panel.es-activo::after {
  background: linear-gradient(180deg, rgba(18,43,74,.02) 0%, rgba(18,43,74,.20) 46%, rgba(12,30,54,.80) 100%);
}

.hero__panel-icono {
  width: 56px; height: 56px; border-radius: 50%; margin-bottom: 1.1rem;
  display: grid; place-items: center; flex: none;
  background: rgba(255,255,255,.14); border: 1.5px solid rgba(255,255,255,.4);
  color: #fff; transition: var(--transicion);
}
.hero__panel-icono svg { width: 27px; height: 27px; }
.hero__panel.es-activo .hero__panel-icono { background: var(--naranja); border-color: var(--naranja); }

.hero__panel-titulo {
  font-family: var(--fuente-tit); font-size: clamp(1.24rem, 1.6vw, 1.62rem);
  font-weight: 700; line-height: 1.15; color: #fff; margin-bottom: .7rem;
  text-shadow: 0 1px 3px rgba(8,16,30,.5), 0 2px 18px rgba(8,16,30,.6);
}
/* En reposo el texto se insinúa; al activar el panel se despliega completo. */
.hero__panel-texto {
  font-size: .95rem; line-height: 1.6; color: rgba(255,255,255,.92);
  text-shadow: 0 1px 3px rgba(8,16,30,.6), 0 2px 14px rgba(8,16,30,.55);
  max-height: 0; opacity: 0; overflow: hidden; margin-bottom: 0;
  transition: max-height .55s cubic-bezier(.4,0,.2,1), opacity .45s ease, margin .55s ease;
}
.hero__panel.es-activo .hero__panel-texto { max-height: 12rem; opacity: 1; margin-bottom: 1.2rem; }
.hero__panel .enlace-mas { color: #fff; align-self: flex-start; }
.hero__panel .enlace-mas:hover { color: var(--naranja-clr); }

/* Línea de progreso inferior del panel activo */
.hero__panel::before {
  content: ""; position: absolute; left: 0; bottom: 0; z-index: 1;
  width: 0; height: 4px; background: var(--naranja); transition: width .55s ease;
}
.hero__panel.es-activo::before { width: 100%; }

@media (max-width: 900px) {
  .hero { height: auto; max-height: none; }
  .hero__fotos { display: none; }
  .hero__encabezado {
    position: static; padding: 2.4rem 24px 1.8rem;
    background: var(--deg-azul);
  }
  .hero__paneles { flex-direction: column; }
  .hero__panel {
    flex: none; min-height: 250px; padding: 1.7rem 1.5rem 2rem;
    border-left: 0; border-top: 1px solid rgba(255,255,255,.15);
    background-image: var(--foto); background-size: cover; background-position: center;
  }
  .hero__panel::after { background: linear-gradient(180deg, rgba(18,43,74,.34) 0%, rgba(10,22,40,.9) 100%); }
  .hero__panel::before { width: 100%; }
  .hero__panel-texto { max-height: 12rem; opacity: 1; margin-bottom: 1.2rem; }
}

/* ---------- 8. Cabecera de páginas internas ---------- */
.cabecera {
  position: relative; margin-top: var(--header-h);
  min-height: clamp(300px, 42vh, 430px);
  display: flex; align-items: center;
  background: var(--azul-osc); overflow: hidden;
}
.cabecera__foto { position: absolute; inset: 0; z-index: 0; }
.cabecera__foto img {
  width: 100%; height: 100%; object-fit: cover;
  /* El cliente pidió (23-09-2026) ver las fotos más claras. Además de aligerar
     el velo, se levanta un poco la propia foto: varias son de día nublado. */
  filter: brightness(1.1) saturate(1.06);
}
/* Velo mínimo, concentrado a la izquierda, que es donde va el texto.
   Los valores no son a ojo: se midió el contraste real del texto blanco sobre
   cada foto de cabecera, columna a columna, y .46 es el velo más liviano con
   el que la peor de ellas (planta-camino, en Quiénes Somos) queda en 4,69:1,
   sobre el 4,5:1 que exige WCAG AA para texto normal — y eso sin contar la
   sombra del texto, que suma. Bajarlo más deja de ser legible ahí.
   Si algún día se cambia una foto de cabecera, hay que volver a medir: una
   foto con el cielo quemado no sostiene texto blanco con este velo. */
.cabecera::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(12,30,54,.46) 0%, rgba(16,38,66,.22) 40%, rgba(18,43,74,.02) 72%);
}
/* Plano inclinado claro que cruza la foto, tomado de las maquetas */
.cabecera__plano {
  position: absolute; right: -6%; top: -20%; z-index: 2;
  width: 46%; height: 140%;
  background: linear-gradient(100deg, rgba(255,255,255,.10), rgba(255,255,255,.02));
  transform: skewX(-22deg); pointer-events: none;
}
.cabecera .contenedor { position: relative; z-index: 3; padding-block: 2.6rem; }
/* Con el velo aligerado, el texto se sostiene con una sombra suave en vez de
   con fondo oscuro: mantiene el contraste sin volver a apagar la foto. */
.cabecera .eyebrow { color: #fff; opacity: .9; text-shadow: 0 1px 12px rgba(8,16,30,.6); }
.cabecera__titulo {
  font-size: clamp(2rem, 4.3vw, 3.3rem); color: #fff;
  text-shadow: 0 2px 22px rgba(8,16,30,.55);
}
.cabecera__titulo::after {
  content: ""; display: block; width: 84px; height: 4px; margin-top: 1.1rem;
  background: linear-gradient(90deg, #fff 0 50%, var(--naranja) 50% 100%);
}
.cabecera__intro {
  margin-top: 1.2rem; max-width: 58ch; color: #fff; font-size: 1.05rem;
  text-shadow: 0 1px 14px rgba(8,16,30,.65);
}

/* ---------- 9. Bloque a dos columnas ---------- */
.duo {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1.8rem, 3.4vw, 3.4rem); align-items: center;
}
.duo--invertido .duo__figura { order: 2; }
.duo__figura { position: relative; isolation: isolate; }
.duo__figura img { width: 100%; border-radius: var(--radio-gr); box-shadow: var(--sombra-alta); }
/* Filo naranja desplazado tras la foto: eco del plano inclinado del isotipo */
.duo__figura::before {
  content: ""; position: absolute; inset: auto -14px -14px auto;
  width: 58%; height: 58%; z-index: -1;
  background: linear-gradient(var(--sesgo), var(--naranja) 0 50%, transparent 50%);
  opacity: .16; border-radius: var(--radio-gr);
}
.duo p + p { margin-top: 1.05rem; }
.duo .btn, .duo .enlace-mas { margin-top: 1.6rem; }
@media (max-width: 860px) {
  .duo { grid-template-columns: 1fr; }
  .duo--invertido .duo__figura { order: 0; }
}

/* ---------- 10. Pilares de marca (Seguridad · Experiencia · …) ---------- */
.pilares {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.16); border-radius: var(--radio-gr); overflow: hidden;
}
.pilar { padding: 1.9rem 1.5rem; text-align: center; }
.pilar__icono {
  width: 54px; height: 54px; margin: 0 auto 1rem; border-radius: 50%;
  display: grid; place-items: center; color: var(--naranja);
  border: 1.5px solid rgba(249,100,49,.55); background: rgba(249,100,49,.10);
}
.pilar__icono svg { width: 26px; height: 26px; }
.pilar h3 { font-size: 1.02rem; letter-spacing: .05em; text-transform: uppercase; margin-bottom: .5rem; }
.pilar p { font-size: .93rem; line-height: 1.6; }
@media (max-width: 880px) { .pilares { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .pilares { grid-template-columns: 1fr; } }

/* ---------- 11. Tarjetas de servicio ---------- */
.rejilla-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.1rem, 2vw, 1.8rem); }
.rejilla-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.1rem, 2vw, 1.8rem); }
@media (max-width: 900px) { .rejilla-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .rejilla-3, .rejilla-2 { grid-template-columns: 1fr; } }

.tarjeta {
  position: relative; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--borde); border-radius: var(--radio-gr);
  overflow: hidden; transition: var(--transicion);
}
.tarjeta:hover { transform: translateY(-5px); box-shadow: var(--sombra-alta); border-color: transparent; }
.tarjeta__figura { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--azul-lav); }
.tarjeta__figura img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,0,.2,1); }
.tarjeta:hover .tarjeta__figura img { transform: scale(1.07); }
/* Filo naranja inclinado en la esquina de la foto: eco del isotipo.
   Se achicó a pedido del cliente (23-09-2026): a 74px tapaba demasiada foto. */
.tarjeta__figura::after {
  content: ""; position: absolute; right: 0; bottom: 0; width: 44px; height: 44px;
  background: linear-gradient(var(--sesgo), transparent 0 50%, var(--naranja) 50% 100%);
  transition: var(--transicion);
}
.tarjeta:hover .tarjeta__figura::after { width: 56px; height: 56px; }
.tarjeta__cuerpo { padding: 1.5rem 1.5rem 1.7rem; display: flex; flex-direction: column; flex: 1; }
.tarjeta__cuerpo h3 { font-size: 1.2rem; margin-bottom: .7rem; }
.tarjeta__cuerpo p { font-size: .96rem; line-height: 1.62; }
.tarjeta__cuerpo .enlace-mas { margin-top: auto; padding-top: 1.3rem; align-self: flex-start; }

/* ---------- 12. Bloques de detalle de servicio ---------- */
.bloque-servicio {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1.8rem, 3.4vw, 3.4rem); align-items: center;
  padding-block: clamp(1.8rem, 3vw, 3rem);
}
.bloque-servicio + .bloque-servicio { border-top: 1px solid var(--borde); }
.bloque-servicio:nth-of-type(even) .bloque-servicio__figura { order: 2; }
.bloque-servicio__figura img { width: 100%; border-radius: var(--radio-gr); box-shadow: var(--sombra); }
.bloque-servicio__cuerpo h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin-bottom: 1rem; }
.bloque-servicio__cuerpo h2::after {
  content: ""; display: block; width: 68px; height: 4px; margin-top: .9rem;
  background: linear-gradient(90deg, var(--azul) 0 50%, var(--naranja) 50% 100%);
}
/* Bajada del servicio: va entre el título y el párrafo, un escalón por
   encima del cuerpo para que se lea como descriptor y no como más texto. */
.bloque-servicio__bajada {
  font-size: 1.1rem; line-height: 1.5; color: var(--azul-med);
  font-weight: 500; margin-bottom: 1rem;
}
@media (max-width: 860px) {
  .bloque-servicio { grid-template-columns: 1fr; }
  .bloque-servicio:nth-of-type(even) .bloque-servicio__figura { order: 0; }
}

/* Lista con viñeta de chevrón */
.lista-chevron { margin-top: 1.4rem; display: grid; gap: .72rem; }
.lista-chevron li { position: relative; padding-left: 2rem; font-size: .99rem; line-height: 1.58; }
.lista-chevron li::before {
  content: ""; position: absolute; left: 0; top: .58em;
  width: 11px; height: 11px; border: 2.5px solid var(--naranja);
  border-left: 0; border-bottom: 0; transform: rotate(45deg);
}
.seccion--azul .lista-chevron li::before { border-color: var(--naranja-clr); }

/* ---------- 13. Empresas O&M ---------- */
.capacidades { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 2.4rem; }
.capacidad { padding: 0 1.3rem; text-align: center; border-left: 1px solid var(--borde); }
.capacidad:first-child { border-left: 0; }
.capacidad__icono { color: var(--naranja); margin: 0 auto .9rem; }
.capacidad__icono svg { width: 38px; height: 38px; margin-inline: auto; }
.capacidad h3 { font-size: 1.02rem; margin-bottom: .5rem; }
.capacidad p { font-size: .91rem; line-height: 1.58; }
@media (max-width: 980px) {
  .capacidades { grid-template-columns: repeat(2, 1fr); gap: 2rem 0; }
  .capacidad { border-left: 0; }
}
@media (max-width: 520px) { .capacidades { grid-template-columns: 1fr; } }

/* Mapa de cobertura. La silueta de Chile y su proyección lineal vienen del
   mismo dato que usa SOCOAM (Natural Earth, dominio público), pero aquí se
   dibuja en franja vertical completa en vez de partida en tres tramos. */
.cobertura {
  display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
  gap: clamp(1.6rem, 3vw, 3rem); align-items: center;
}
.cobertura__mapa {
  background: #fff; border: 1px solid var(--borde); border-radius: var(--radio-gr);
  padding: 1.8rem; display: flex; justify-content: center;
}
.cobertura__mapa svg { height: clamp(260px, 40vh, 380px); width: auto; }
.mapa__pais { fill: #E4EAF2; }
.mapa__tramo { fill: var(--naranja); }
.mapa__linea { stroke: var(--naranja); stroke-width: 2; fill: none; }
.mapa__punto { fill: var(--naranja); }
.mapa__hito { font-family: var(--fuente); font-size: 20px; font-weight: 600; fill: var(--azul); }
.cobertura__rango {
  font-size: clamp(1.7rem, 3vw, 2.4rem); font-family: var(--fuente-tit);
  font-weight: 700; color: var(--azul); line-height: 1.14; margin-top: 1rem;
}
@media (max-width: 860px) { .cobertura { grid-template-columns: 1fr; } }

/* ---------- 14. Apoyo normativo: la alianza con SOCOAM ---------- */
/* La marca aliada se muestra en su propia identidad, separada del logo
   RAMAR por un filete, tal como pidió el cliente en la lámina
   "Apoyo en Revisión Normativa". */
.alianza {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(1.4rem, 4vw, 3.2rem); flex-wrap: wrap;
  padding-bottom: 2.2rem; margin-bottom: 2.6rem;
  border-bottom: 1px solid var(--borde);
}
.alianza__marca { text-align: center; }
.alianza__marca img { margin-inline: auto; }
.alianza__marca--ramar img { width: clamp(180px, 20vw, 250px); }
.alianza__marca--socoam img { width: clamp(190px, 21vw, 268px); }
.alianza__rol {
  margin-top: .9rem; font-size: .78rem; font-weight: 600;
  letter-spacing: .17em; text-transform: uppercase; color: var(--azul-med); line-height: 1.6;
}
.alianza__filete { width: 1px; align-self: stretch; min-height: 96px; background: var(--borde); }
@media (max-width: 700px) { .alianza__filete { display: none; } }

.rejilla-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 1.8vw, 1.5rem); }
@media (max-width: 900px) { .rejilla-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .rejilla-4 { grid-template-columns: 1fr; } }

.ficha-normativa {
  display: flex; flex-direction: column; text-align: center;
  background: #fff; border: 1px solid var(--borde); border-radius: var(--radio-gr);
  padding: 1.9rem 1.3rem 1.6rem; transition: var(--transicion);
}
.ficha-normativa:hover { transform: translateY(-5px); box-shadow: var(--sombra-alta); border-color: transparent; }
.ficha-normativa__icono {
  width: 68px; height: 68px; margin: 0 auto 1.15rem; border-radius: 50%;
  display: grid; place-items: center; background: var(--azul-lav); color: var(--azul);
  transition: var(--transicion);
}
.ficha-normativa__icono svg { width: 32px; height: 32px; }
.ficha-normativa:hover .ficha-normativa__icono { background: var(--naranja-lav); color: var(--naranja); }
.ficha-normativa h3 { font-size: 1.02rem; line-height: 1.36; margin-bottom: 1rem; }
/* El rótulo va en su propio span: si el texto envuelve, el icono debe quedar
   pegado a la última palabra y no caer suelto en una línea aparte. */
.ficha-normativa__pie {
  margin-top: auto; padding-top: .9rem;
  font-size: .76rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--naranja); line-height: 1.5;
}
.ficha-normativa__pie svg { display: inline; vertical-align: -2px; margin-left: .45rem; }
.ficha-normativa__pie svg { width: 13px; height: 13px; transition: var(--transicion); }
.ficha-normativa:hover .ficha-normativa__pie svg { transform: translateX(3px); }

/* ---------- 15. Llamado a la acción en franja ---------- */
.franja-cta {
  display: flex; align-items: center; gap: clamp(1.2rem, 3vw, 2.4rem); flex-wrap: wrap;
  background: var(--fondo-alt); border: 1px solid var(--borde); border-radius: var(--radio-gr);
  padding: clamp(1.5rem, 2.6vw, 2.2rem) clamp(1.5rem, 3vw, 2.6rem);
  position: relative; overflow: hidden;
}
.franja-cta--azul { background: var(--deg-azul); border-color: transparent; color: rgba(255,255,255,.86); }
.franja-cta--azul h3 { color: #fff; }
.franja-cta__icono { flex: none; color: var(--naranja); position: relative; z-index: 1; }
.franja-cta__icono svg { width: 56px; height: 56px; }
.franja-cta__texto { flex: 1 1 320px; position: relative; z-index: 1; }

/* Variante apilada. Sin esto el `flex:1` del texto crece en el eje vertical y
   abre un hueco enorme entre el párrafo y el botón. */
.franja-cta--columna { flex-direction: column; align-items: flex-start; gap: 1.1rem; }
.franja-cta--columna .franja-cta__texto { flex: 0 1 auto; }
.franja-cta__texto h3 { font-size: clamp(1.18rem, 1.9vw, 1.45rem); margin-bottom: .3rem; }
.franja-cta__texto p { font-size: .98rem; }
.franja-cta .btn { flex: none; position: relative; z-index: 1; }

/* ---------- 16. Galería de experiencia ---------- */
/* Mosaico de filas fijas. Con `aspect-ratio` en cada figura, las piezas
   destacadas quedaban más altas que sus vecinas y abrían un hueco en la
   fila; con una altura de fila constante, la pieza destacada ocupa dos
   columnas y dos filas y el mosaico cierra. `dense` rellena los huecos
   que el salto de tamaño pueda dejar. */
.galeria {
  display: grid; grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(140px, 15.5vw, 200px);
  grid-auto-flow: dense; gap: 12px;
}
.galeria figure {
  position: relative; overflow: hidden; border-radius: var(--radio-gr);
  background: var(--azul-lav); margin: 0;
}
/* Dos piezas mandan: la primera y la sexta, para que la retícula no se lea
   como una plantilla de fotos sueltas. */
.galeria figure:nth-child(1), .galeria figure:nth-child(6) { grid-column: span 2; grid-row: span 2; }
.galeria img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,0,.2,1); }
.galeria figure:hover img { transform: scale(1.06); }
.galeria figcaption {
  position: absolute; inset: auto 0 0 0; padding: 1.6rem 1.1rem .95rem;
  font-size: .88rem; font-weight: 600; color: #fff;
  background: linear-gradient(180deg, transparent, rgba(10,20,36,.86));
}
@media (max-width: 900px) {
  .galeria { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 24vw; }
}
@media (max-width: 520px) {
  .galeria { grid-template-columns: 1fr; grid-auto-rows: 58vw; }
  .galeria figure:nth-child(1), .galeria figure:nth-child(6) { grid-column: span 1; grid-row: span 1; }
}

/* ---------- 17. Formulario de contacto ---------- */
/* Va al pie de todas las páginas, como pidió la propuesta del cliente. */
.contacto { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,.85fr); gap: clamp(1.6rem, 3vw, 3rem); }
@media (max-width: 900px) { .contacto { grid-template-columns: 1fr; } }

.formulario {
  background: #fff; border: 1px solid var(--borde); border-radius: var(--radio-gr);
  padding: clamp(1.5rem, 2.8vw, 2.4rem);
}
.formulario__intro { color: var(--gris-med); margin-bottom: 1.6rem; }

.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.campo { display: flex; flex-direction: column; gap: .4rem; }
.campo--ancho { grid-column: 1 / -1; }
@media (max-width: 560px) { .campos { grid-template-columns: 1fr; } }

.campo label { font-size: .88rem; font-weight: 600; color: var(--azul); }
.campo label .req { color: var(--naranja); }
.campo input, .campo select, .campo textarea {
  width: 100%; padding: .78rem .9rem;
  background: var(--fondo-alt); border: 1px solid var(--borde); border-radius: var(--radio);
  font-size: .98rem; transition: var(--transicion);
}
.campo textarea { min-height: 132px; resize: vertical; }
.campo input::placeholder, .campo textarea::placeholder { color: var(--gris-sua); }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: 0; background: #fff; border-color: var(--naranja);
  box-shadow: 0 0 0 3px rgba(249,100,49,.14);
}
.campo.tiene-error input, .campo.tiene-error select, .campo.tiene-error textarea { border-color: #D93B3B; }
.campo__error { font-size: .82rem; color: #D93B3B; }
.campo__error:empty { display: none; }
.campo__conteo { font-size: .82rem; color: var(--gris-sua); text-align: right; }

.formulario__enviar { width: 100%; margin-top: 1.5rem; }
.formulario__nota {
  display: flex; align-items: center; gap: .6rem; justify-content: center;
  margin-top: 1rem; font-size: .85rem; color: var(--gris-med);
}
.formulario__nota svg { width: 15px; height: 15px; flex: none; }

.aviso {
  display: flex; align-items: flex-start; gap: .7rem;
  padding: .85rem 1rem; border-radius: var(--radio); font-size: .9rem;
  background: var(--naranja-lav); border: 1px solid rgba(249,100,49,.3); color: #8A3512;
  margin-bottom: 1.4rem;
}
.aviso svg { width: 18px; height: 18px; flex: none; margin-top: .18rem; }
.aviso--ok { background: #EAF6EE; border-color: #A8D8B9; color: #1D6B38; }
.aviso--error { background: #FDECEC; border-color: #F0BABA; color: #A32828; }

/* Panel de datos de contacto.
   Va en tarjetas apiladas, como el de SOCOAM: con los datos sueltos la
   columna quedaba medio vacía al lado de un formulario alto. Aquí el aire
   sobrante se reparte entre las tarjetas en vez de acumularse abajo. */
.datos { display: flex; flex-direction: column; gap: 1rem; }

.info-bloque {
  background: #fff; border: 1px solid var(--borde); border-radius: var(--radio-gr);
  padding: 1.4rem 1.5rem;
}
/* Las tarjetas de texto absorben el alto que sobra; la de datos y la de redes
   se quedan con el suyo, que es fijo. */
.info-bloque--flexible { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }

.info-bloque__cabeza { display: flex; align-items: center; gap: .9rem; margin-bottom: 1rem; }
.info-bloque__cabeza h3 { font-size: 1.12rem; line-height: 1.2; }
.info-bloque p { font-size: .96rem; line-height: 1.62; color: var(--gris-med); }

/* Pastilla del icono: cuadrada con una esquina achaflanada, guiño al plano
   inclinado del isotipo. Es lo que la separa del círculo que usa SOCOAM. */
.info-tile {
  flex: none; width: 46px; height: 46px;
  border-radius: var(--radio) var(--radio) var(--radio) 14px;
  display: grid; place-items: center;
  background: var(--azul-lav); color: var(--azul);
}
.info-tile svg { width: 22px; height: 22px; }
.info-bloque--acento .info-tile { background: var(--naranja-lav); color: var(--naranja); }
.dato { display: flex; align-items: flex-start; gap: .95rem; }
.dato + .dato { margin-top: 1rem; }
.dato__icono {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; background: var(--azul); color: #fff;
}
.dato__icono svg { width: 20px; height: 20px; }
.dato__texto strong { display: block; font-size: .93rem; color: var(--azul); font-weight: 600; }
.dato__texto span, .dato__texto a { font-size: .98rem; color: var(--gris); }
.dato__texto a:hover { color: var(--naranja); }

.redes { display: flex; gap: .7rem; }
.red {
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; background: var(--azul); color: #fff;
  transition: var(--transicion);
}
.red svg { width: 19px; height: 19px; }
.red:hover { background: var(--naranja); transform: translateY(-3px); }

/* ---------- 18. Pie ---------- */
/* La franja del pie es el chevrón del isotipo a escala grande: el
   equivalente RAMAR de la silueta ondulada que cierra el sitio de SOCOAM. */
.footer {
  position: relative; background: var(--azul-osc);
  color: rgba(255,255,255,.72); padding-top: 3.2rem; overflow: hidden;
}
/* Dos chevrones encajados, como los dos planos del isotipo: el naranja
   delante y el azul claro detrás y corrido a la izquierda. Con clip-path,
   porque cruzar dos degradados a 45° dibuja una X, no un techo. */
/* Sólo asoma la punta: si sube más, el naranja compite con el texto de la
   barra de copyright que corre por encima. */
.footer::before, .footer::after {
  content: ""; position: absolute; bottom: -46%; z-index: 0; pointer-events: none;
  width: min(520px, 62%); aspect-ratio: 2.6/1;
  clip-path: polygon(0 52%, 50% 0, 100% 52%, 100% 100%, 50% 48%, 0 100%);
}
.footer::before { left: 50%; translate: -50% 0; background: rgba(249,100,49,.30); }
.footer::after  { left: 50%; translate: -80% 0; background: rgba(255,255,255,.05); }
.footer .contenedor { position: relative; z-index: 1; }

.footer__cuerpo {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.15fr;
  gap: clamp(1.6rem, 3vw, 3rem); padding-bottom: 2.6rem;
}
@media (max-width: 940px) { .footer__cuerpo { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer__cuerpo { grid-template-columns: 1fr; } }

.footer__logo img { width: 172px; margin-bottom: 1.1rem; }
.footer p { font-size: .94rem; line-height: 1.62; }
.footer h3 {
  font-size: .88rem; font-weight: 600; letter-spacing: .17em; text-transform: uppercase;
  color: #fff; margin-bottom: 1.1rem; padding-bottom: .6rem;
  border-bottom: 2px solid var(--naranja); display: inline-block;
}
.footer__lista { display: flex; flex-direction: column; gap: .55rem; }
.footer__lista a, .footer__lista span, .footer__lista p {
  font-size: .94rem; color: rgba(255,255,255,.72); transition: var(--transicion);
}
.footer__lista a:hover { color: var(--naranja-clr); padding-left: .3rem; }
.footer .redes { margin-top: 1.2rem; }
.footer .red { background: rgba(255,255,255,.12); }
.footer .red:hover { background: var(--naranja); }

.footer__barra {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding-block: 1.3rem; border-top: 1px solid rgba(255,255,255,.14);
  font-size: .87rem;
}
.footer__lema {
  font-weight: 600; letter-spacing: .17em; text-transform: uppercase; color: var(--naranja);
  display: flex; align-items: center; gap: .8rem;
}
.footer__lema::after { content: ""; width: 46px; height: 2px; background: var(--naranja); }

/* ---------- 19. Botón volver arriba ---------- */
.arriba {
  position: fixed; right: 22px; bottom: 22px; z-index: 900;
  width: 46px; height: 46px; border-radius: var(--radio);
  display: grid; place-items: center;
  background: var(--azul); color: #fff; border: 0; cursor: pointer;
  opacity: 0; visibility: hidden; translate: 0 10px;
  box-shadow: var(--sombra-alta); transition: var(--transicion);
}
.arriba svg { width: 20px; height: 20px; }
.arriba.es-visible { opacity: 1; visibility: visible; translate: 0 0; }
.arriba:hover { background: var(--naranja); }

/* ---------- 20. Aparición al hacer scroll ---------- */
.aparece {
  opacity: 0; translate: 0 22px;
  transition: opacity .7s ease, translate .7s cubic-bezier(.2,0,.2,1);
}
.aparece.es-visible { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) { .aparece { opacity: 1; translate: 0 0; } }