/* ══════════════════════════════════════════
   INICIO — front-page.php
   Namespace: ip- (inicio page)
══════════════════════════════════════════ */

:root {
  --ip-white:   #ffffff;
  --ip-black:   #0d0d0c;
  --ip-bg:      #f1efee;
  --ip-green:   #a2a569;
  --ip-green-dk:#7a7d4f;
  --ip-muted:   #5c5c52;
  --ip-bw:      2px solid #0d0d0c;
  --ip-max:     1400px;
  --ip-pad:     64px;
}

.ip-inner { max-width: var(--ip-max); margin: 0 auto; padding: 0 var(--ip-pad); }
.ip-eyebrow { display:block; font-size:11px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; color:var(--ip-muted); font-style:italic; margin-bottom:12px; }
.ip-sec-title { font-size:clamp(28px,2.8vw,46px); font-weight:600; letter-spacing:-.6px; line-height:1.05; display:inline-block; border-bottom:3px solid var(--ip-green); padding-bottom:4px; }
.ip-head { margin-bottom:44px; }

.ip-btn { display:inline-block; font-family:inherit; font-size:13px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; padding:14px 28px; border:1.5px solid var(--ip-black); border-radius:50px; color:var(--ip-black); background:var(--ip-white); cursor:pointer; box-shadow:1px 1px 0 rgba(13,13,12,0.12); transition:background .2s,color .2s; text-decoration:none; }
.ip-btn:hover { background:var(--ip-green); color:var(--ip-black); }
.ip-btn--solid { background:var(--ip-black); color:var(--ip-white); }
.ip-btn--solid:hover { background:var(--ip-green); color:var(--ip-black); }

/* ── HERO ─────────────────────────────────────── */
.ip-hero { position:relative; background:var(--ip-bg); display:grid; grid-template-columns:1.15fr 0.85fr; overflow:hidden; }
/* El menú es fixed (74-77 px) y el hero empezaba en y=0: tapaba la parte de arriba de la
   foto y, en móvil, la primera línea del titular. Se reserva su hueco (2026-10-02). */
.ip-hero { padding-top:77px; }
.ip-hero__left { display:flex; flex-direction:column; justify-content:center; padding:48px var(--ip-pad); }
/* 2026-10-02 (reunión revisión web): la foto salía "descuadrada y con demasiado zoom".
   Es vertical (1122x1402, 4:5) y se metía con object-fit:cover en una caja más ancha que
   alta: en 1920 px quedaba 752x720 y en móvil 350x300, recortando cabeza y pies.
   Ahora la caja mantiene la proporción de la foto, así se ve entera, y se centra en vertical.
   Antes: max-height:720px; margin:24px var(--ip-pad) 24px 0; img height:100%. */
.ip-hero__right { position:relative; overflow:hidden; align-self:center; justify-self:end; width:calc(100% - var(--ip-pad)); max-width:calc(min(720px, 100vh - 140px) * 0.8); border-radius:12px; margin:32px var(--ip-pad) 32px 0; }
.ip-hero__right img { width:100%; height:auto; aspect-ratio:1122 / 1402; object-fit:cover; object-position:center center; display:block; }
.ip-hero__h1 { font-size:clamp(44px,4.5vw,80px); font-weight:600; letter-spacing:-1.5px; line-height:.95; color:var(--ip-black); margin-bottom:28px; }
.ip-hero__h1 span { color:var(--ip-green); }
.ip-hero-rotate-inline { display:inline-block; overflow:hidden; height:1em; line-height:1; vertical-align:bottom; }
.ip-rotate-wrap { display:block; overflow:hidden; height:1em; line-height:1; }
.ip-rotate-words { display:flex; flex-direction:column; animation:ipRotateWords 5s cubic-bezier(.77,0,.18,1) infinite; }
.ip-rotate-words span { display:block; height:1em; line-height:1; white-space:nowrap; flex-shrink:0; overflow:hidden; }
@keyframes ipRotateWords {
	0%,16%   { transform:translateY(0); }
	20%,36%  { transform:translateY(-1em); }
	40%,56%  { transform:translateY(-2em); }
	60%,76%  { transform:translateY(-3em); }
	80%,96%  { transform:translateY(-4em); }
	100%     { transform:translateY(-5em); }
}
.ip-hero__sub { font-size:15px; color:var(--ip-muted); max-width:440px; line-height:1.72; margin-bottom:32px; }
.ip-hero__btns { display:flex; gap:14px; flex-wrap:wrap; }
@media (max-width: 860px) {
  .ip-hero { grid-template-columns:1fr; }
  /* En estrecho el logo puede pasar a otra línea y el menú mide 108 px. */
  .ip-hero { padding-top:108px; }
  .ip-hero__left { padding:24px var(--ip-pad) 40px; }
  .ip-hero__right { justify-self:center; width:calc(100% - 2 * var(--ip-pad)); max-width:480px; margin:0 var(--ip-pad) 24px; }
}

/* ── TICKER ───────────────────────────────────── */
.ip-ticker-wrap { background:var(--ip-green); overflow:hidden; padding:16px 0; }
.ip-ticker-track { display:flex; width:max-content; animation:ip-ticker 28s linear infinite; }
.ip-ticker-track:hover { animation-play-state:paused; }
.ip-ticker-item { font-size:17px; font-weight:600; letter-spacing:2.5px; text-transform:uppercase; color:var(--ip-white); white-space:nowrap; padding:0 28px; }
.ip-ticker-sep { font-size:17px; font-weight:600; color:rgba(255,255,255,.5); }
@keyframes ip-ticker { 0% { transform:translateX(0); } 100% { transform:translateX(-50%); } }
/* Reunión 2026-10-02: la cinta de abajo (#wrapper-carousel-ad) se quita en la portada y
   esta ocupa su sitio: fija al pie, 40 px de alto y el mismo z-index (1030, .fixed-bottom).
   .ip-page reserva esos 40 px para que no tape el final de la página.
   Para volver atrás, borrar este bloque. */
.ip-ticker-wrap { position:fixed; left:0; right:0; bottom:0; z-index:1030; padding:0; height:40px; display:flex; align-items:center; }
.ip-ticker-item, .ip-ticker-sep { font-size:15px; line-height:40px; }
.ip-page { padding-bottom:40px; }
/* 2026-10-06: los legales del pie (footer.php) quedan fuera de .ip-page y la cinta
   fija los tapaba. Mismo aire que body.has-ticker en revision-agosto.css; el selector
   lleva "body" para ganar a .locopolo-legal, que se imprime después. */
body .locopolo-legal { padding-bottom:76px; }

/* ── SECTORES ─────────────────────────────────── */
.ip-sectores { background:var(--ip-bg); }
.ip-sectores .ip-inner { padding-top:80px; padding-bottom:80px; }
/* 2026-10-02: lista editorial con foto propia (antes 5 tarjetas con icono). */
.ip-sectores__inner { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:64px; align-items:start; }
.ip-sectores__inner .ip-head { position:sticky; top:120px; margin-bottom:0; }
.ip-sectores-lista { list-style:none; margin:0; padding:0; border-top:1px solid rgba(13,13,12,.18); }
.ip-sectores-lista li { margin:0; border-bottom:1px solid rgba(13,13,12,.18); }
.ip-sector { display:grid; grid-template-columns:minmax(0,1fr) 200px; gap:32px; align-items:center; padding:22px 0; color:var(--ip-black); text-decoration:none; }
.ip-sector:hover, .ip-sector:focus-visible { color:var(--ip-black); text-decoration:none; }
.ip-sector__texto { display:flex; flex-direction:column; gap:8px; }
.ip-sector__nombre { font-size:clamp(24px,2.4vw,38px); font-weight:600; letter-spacing:-.6px; line-height:1.05; }
.ip-sector__flecha { display:inline-block; font-weight:400; transition:transform .2s; }
.ip-sector:hover .ip-sector__nombre, .ip-sector:focus-visible .ip-sector__nombre { color:var(--ip-green-dk); }
.ip-sector:hover .ip-sector__flecha, .ip-sector:focus-visible .ip-sector__flecha { transform:translateX(6px); }
.ip-sector__txt { font-size:15px; line-height:1.55; color:var(--ip-muted); max-width:420px; }
/* 2026-10-02: 4:5, la proporción de las fotos originales. Con 4:3 se recortaba ~40 % del alto
   y parecían con zoom (antes: aspect-ratio:4/3, columna de 220px). */
.ip-sector__foto { display:block; aspect-ratio:4/5; overflow:hidden; border-radius:8px; }
.ip-sector__foto img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s; }
.ip-sector:hover .ip-sector__foto img { transform:scale(1.04); }
@media (max-width: 900px) {
  .ip-sectores__inner { grid-template-columns:1fr; gap:32px; }
  .ip-sectores__inner .ip-head { position:static; }
}
@media (max-width: 600px) {
  /* 2026-10-02: 64px de margen en móvil dejaba la columna en ~260px. */
  :root { --ip-pad:20px; }
  .ip-sector { grid-template-columns:minmax(0,1fr) 112px; gap:16px; padding:18px 0; }
  .ip-sector__txt { font-size:14px; }
}

/* ── CLIENTES ─────────────────────────────────── */
.ip-clientes { background:var(--ip-bg); border-top:1px solid rgba(162,165,105,0.3); padding:60px 0 0; }
.ip-clientes .ip-inner { padding-bottom:40px; }
.ip-clientes-track-wrap { background:var(--ip-green); overflow:hidden; padding:14px 0; }
.ip-clientes-track { display:flex; align-items:center; width:max-content; animation:ip-scroll-logos 40s linear infinite; }
.ip-clientes-track:hover { animation-play-state:paused; }
.ip-client-logo { font-size:13px; font-weight:800; letter-spacing:.5px; color:var(--ip-white); white-space:nowrap; padding:0 28px; }
.ip-client-sep { color:var(--ip-white); opacity:.5; font-size:14px; }
@keyframes ip-scroll-logos { 0% { transform:translateX(0); } 100% { transform:translateX(-50%); } }

/* ── CTA FINAL ────────────────────────────────── */
.ip-cta { background:var(--ip-bg); padding:48px var(--ip-pad); text-align:center; }