/* ═══════════════════════════════════════════════════════════════════════════
   CEPAS · APERTURAS — Centro de Entrada de Proveedores, Agencias y Servicios
   La cepa es la base del tronco: por ahí entra lo nuevo y sube a la copa (CIMA).
   Estos formularios llegan a clientes y proveedores: la paleta es la de Terranova
   origen, la marca es su estrella y el logo de la casa va en cada pantalla. De la cepa
   queda la veta tenue del fondo (los anillos del tronco). Cada formulario tiene su
   foto de Costa Rica y un acento de la paleta. El login es el de las demás apps.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  /* La paleta de Terranova origen (la misma de CIMA): estos formularios llegan a clientes.
     navy #1A2633 · navy hondo #0D1720 · teal #005565 / #006D82 · salvia #7D9B5B · crema #EADFCE */
  --navy:#1A2633; --navy-hondo:#0D1720; --teal:#005565; --teal-alto:#006D82; --salvia:#7D9B5B; --crema:#EADFCE;
  --fondo:#0D1720; --panel:#1A2633; --tinta:#F3EDE3; --tinta-2:#A9B6BE; --linea:rgba(234,223,206,.16);
  --acento:#006D82; --acento-tinta:#FFFFFF; --acento-texto:#8FC7CF; --campo:rgba(234,223,206,.05); --error:#FF9C8A;
  --serif:'Newsreader', Georgia, 'Times New Roman', serif;
  --sans:'Schibsted Grotesk', 'Segoe UI', system-ui, sans-serif;
  --foto:none;
  /* La veta de la cepa, muy tenue: los anillos del tronco en crema. */
  --veta:repeating-radial-gradient(circle at 115% -20%, transparent 0 22px, rgba(234,223,206,.035) 22px 23px, transparent 23px 41px, rgba(234,223,206,.022) 41px 42px);
}
/* Cada formulario: su foto de Costa Rica y un acento de la paleta de Terranova. */
[data-form="agencia"]{ --acento:#006D82; --acento-tinta:#FFFFFF; --acento-texto:#8FC7CF;
  --foto:url('https://images.unsplash.com/photo-1643400812282-4ef456a7b352?q=80&w=2000&auto=format&fit=crop'); }
[data-form="directo"]{ --acento:#5E7C40; --acento-tinta:#FFFFFF; --acento-texto:#AFC690;
  --foto:url('https://images.unsplash.com/photo-1766828884980-bb76ac505f38?q=80&w=2000&auto=format&fit=crop'); }
[data-form="proveedor"]{ --acento:#005565; --acento-tinta:#FFFFFF; --acento-texto:#EADFCE;
  --foto:url('https://images.unsplash.com/photo-1674170117831-7a0bb884b398?q=80&w=2000&auto=format&fit=crop'); }
[data-form="servicio"]{ --acento:#5E7C40; --acento-tinta:#FFFFFF; --acento-texto:#AFC690;
  --foto:url('https://images.unsplash.com/photo-1776192030922-f0d342487045?q=80&w=2000&auto=format&fit=crop'); }

*{ box-sizing:border-box; }
html,body{ margin:0; min-height:100%; }
body{ background:var(--fondo); color:var(--tinta); font-family:var(--sans); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased; transition:background .5s ease; }
button,input,select,textarea{ font:inherit; color:inherit; }
:focus-visible{ outline:2px solid var(--acento); outline-offset:3px; }
.escena{ display:none; }

/* ── La marca: la estrella de Terranova + CEPAS ───────────────────────────── */
.marca{ display:inline-flex; align-items:center; gap:.7rem; text-decoration:none; color:inherit; }
.estrella{ width:30px; height:30px; flex:none; object-fit:contain; }
.logo-tn{ height:30px; width:auto; display:block; }
.marca b{ font-weight:700; letter-spacing:.34em; font-size:.95rem; }
.marca span{ font-family:var(--serif); font-style:italic; font-weight:300; font-size:1.05rem; opacity:.85; }
.sigla{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--tinta-2); margin:.5rem 0 0; }
.sigla i{ font-style:normal; color:var(--acento-texto); font-weight:700; }

/* ── La entrada: el login de las demás apps (CIMA, app1), con la foto de CEPAS ── */
.ingreso{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; padding:1rem; overflow:auto;
  background:#0D1720 url('https://images.unsplash.com/photo-1476589143317-647df3b59c32?q=85&w=2800&auto=format&fit=crop') no-repeat center 42% / cover; }
/* La cepa, de verdad: los anillos de crecimiento de un tronco cortado (Unsplash, gratuita), con sus colores reales. */
.vidrio{ position:relative; width:100%; max-width:340px; padding:1.75rem; border-radius:1.5rem; text-align:center; color:#fff;
  background:rgba(13,23,32,.42); backdrop-filter:blur(16px) saturate(1.1); -webkit-backdrop-filter:blur(16px) saturate(1.1);
  border:1px solid rgba(255,255,255,.2); box-shadow:0 25px 50px -12px rgba(0,0,0,.5); animation:aparece .45s ease-out; margin:auto; }
@keyframes aparece{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.vidrio .estrella{ width:3.5rem; height:3.5rem; margin:0 auto 1rem; display:block; filter:drop-shadow(0 10px 15px rgba(0,0,0,.4)); }
.vidrio h1{ font-size:1.5rem; font-weight:700; letter-spacing:.02em; margin:0 0 .25rem; text-shadow:0 2px 4px rgba(0,0,0,.4); }
.vidrio .sub{ color:#e2e8f0; font-size:.5625rem; font-weight:700; margin:0 0 1.5rem; letter-spacing:.2em; text-transform:uppercase; }
.vidrio form{ text-align:left; display:flex; flex-direction:column; gap:.75rem; max-width:none; }
.caja{ position:relative; }
.caja .ico{ position:absolute; left:1rem; top:50%; transform:translateY(-50%); color:var(--navy); font-size:18px; z-index:2; pointer-events:none; }
.caja input{ display:block; width:100%; padding:.625rem 3rem .625rem 2.75rem; font-size:.875rem; border:0; border-radius:.75rem;
  background:rgba(255,255,255,.95); color:var(--navy); font-weight:600; box-shadow:inset 0 2px 4px rgba(0,0,0,.06); }
.caja input:focus{ outline:none; box-shadow:0 0 0 4px rgba(0,109,130,.45); }
.caja .ojo{ position:absolute; right:1rem; top:50%; transform:translateY(-50%); color:#94a3b8; background:none; border:0; cursor:pointer; display:flex; padding:0; }
.opciones{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:0 .25rem; font-size:.6875rem; color:rgba(255,255,255,.9); font-weight:500; }
.opciones label{ display:flex; align-items:center; gap:.375rem; cursor:pointer; }
.opciones input{ accent-color:var(--teal-alto); }
.opciones button{ background:none; border:0; cursor:pointer; color:#7dd3d8; font-weight:700; padding:0; font-size:inherit; }
.opciones button:hover{ text-decoration:underline; }
.temporal{ display:flex; flex-direction:column; gap:.75rem; border-top:1px solid rgba(255,255,255,.1); padding-top:.75rem; }
.temporal p{ font-size:.6875rem; color:#fcd34d; font-weight:700; text-align:center; margin:0; }
.ingresar{ width:100%; margin-top:.5rem; color:var(--crema); font-weight:700; padding:.75rem 1rem; border-radius:.75rem; cursor:pointer;
  border:1px solid rgba(255,255,255,.2); box-shadow:0 15px 25px rgba(0,0,0,.3); display:flex; justify-content:center; align-items:center; gap:.5rem;
  text-transform:uppercase; letter-spacing:.1em; font-size:.8rem; background:linear-gradient(135deg, var(--navy) 0%, var(--teal) 100%); transition:transform .3s; }
.ingresar:hover{ transform:scale(1.03); }
.ingresar[disabled]{ opacity:.7; cursor:wait; transform:none; }
.vidrio .pie{ margin-top:2rem; }
.vidrio .pie hr{ border:0; border-top:1px solid rgba(255,255,255,.2); width:75%; margin:0 auto .75rem; }
.vidrio .pie p{ margin:0; font-size:.5625rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.75); font-weight:700; }
.vidrio .aviso-ingreso{ margin:0; font-size:.75rem; color:#fecaca; text-align:center; }
.vidrio .aviso-ingreso.bien{ color:#bbf7d0; }

/* ── Portada: los cuatro formularios ─────────────────────────────────────── */
.portada-fondo{ min-height:100vh; background:var(--fondo) var(--veta); }
.portada{ max-width:1180px; margin:0 auto; padding:2.2rem clamp(16px,4vw,3rem) 4rem; }
.portada__cab{ display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; flex-wrap:wrap; margin-bottom:2.6rem; }
.portada h1{ font-family:var(--serif); font-weight:300; font-style:italic; font-size:clamp(2rem,4.2vw,3.2rem); line-height:1.05; margin:2.2rem 0 .6rem; text-wrap:balance; max-width:22ch; }
.portada__intro{ color:var(--tinta-2); max-width:56ch; margin:0; }
.quien{ display:flex; align-items:center; gap:.8rem; font-size:.88rem; color:var(--tinta-2); }
.quien button{ background:none; border:1px solid var(--linea); color:var(--tinta-2); border-radius:99px; padding:.35rem .8rem; cursor:pointer; font-size:.8rem; }
.tarjetas{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.tarjeta{ position:relative; display:flex; flex-direction:column; justify-content:flex-end; min-height:300px; padding:1.6rem;
  border-radius:3px; overflow:hidden; color:#fff; text-decoration:none; isolation:isolate; }
.tarjeta::before{ content:''; position:absolute; inset:0; background:#222 var(--foto) center/cover; z-index:-2; transition:transform 1.4s cubic-bezier(.2,.7,.2,1); }
.tarjeta::after{ content:''; position:absolute; inset:40% 0 0; background:linear-gradient(to top, rgba(13,23,32,.8), rgba(13,23,32,0)); z-index:-1; }
.tarjeta:hover::before{ transform:scale(1.045); }
.tarjeta small{ font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; color:var(--acento-texto); font-weight:700; }
.tarjeta strong{ font-family:var(--serif); font-weight:400; font-style:italic; font-size:1.95rem; line-height:1.1; margin:.25rem 0 .3rem; }
.tarjeta span{ font-size:.92rem; opacity:.9; max-width:42ch; }
.enlaces{ margin-top:2.8rem; border-top:1px solid var(--linea); padding-top:1.6rem; display:grid; gap:1rem; }
.enlaces h2{ font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--acento-texto); margin:0; font-weight:700; }
.enlaces > p{ margin:0; color:var(--tinta-2); font-size:.9rem; max-width:62ch; }
.enlace{ display:flex; gap:.8rem; align-items:center; flex-wrap:wrap; }
.enlace b{ min-width:9rem; font-weight:500; }
.enlace code{ flex:1 1 280px; min-width:0; font-size:.8rem; padding:.7rem .9rem; background:var(--campo); border:1px solid var(--linea); border-radius:3px; overflow-x:auto; white-space:nowrap; }

/* ── El formulario: la foto a un lado, la madera al otro ─────────────────── */
.hoja{ display:grid; grid-template-columns:minmax(0,42fr) minmax(0,58fr); min-height:100vh; }
.hoja__foto{ position:sticky; top:0; height:100vh; background:#0D1720; color:#fff; overflow:hidden;
  display:flex; flex-direction:column; justify-content:space-between; padding:2rem clamp(1.4rem,3vw,2.6rem); isolation:isolate; }
/* Sin velo sobre la foto: sólo una sombra abajo para que el título se lea. */
.hoja__foto::after{ content:''; position:absolute; inset:50% 0 0; background:linear-gradient(to top, rgba(13,23,32,.72), rgba(13,23,32,0)); z-index:-1; }
.hoja__foto .volver{ align-self:flex-start; color:#fff; text-decoration:none; font-size:.85rem; display:inline-flex; gap:.5rem; align-items:center;
  background:rgba(13,23,32,.34); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); padding:.5rem .95rem; border-radius:99px; }
.hoja__foto h1{ font-family:var(--serif); font-weight:300; font-style:italic; font-size:clamp(2.4rem,4.6vw,4.2rem); line-height:1; margin:0 0 .7rem; text-wrap:balance; }
.hoja__foto p{ margin:0; max-width:36ch; font-size:1rem; opacity:.94; }
.hoja__foto .lugar{ margin-top:1.1rem; font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--acento-texto); opacity:1; font-weight:600; }
.hoja__papel{ background:var(--panel) var(--veta); padding:2.4rem clamp(16px,5vw,4.5rem) 4rem; }
.papel__cab{ display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; margin-bottom:2.4rem; }
.idioma{ display:inline-flex; border:1px solid var(--linea); border-radius:99px; padding:3px; }
.idioma button{ border:0; background:none; padding:.3rem .85rem; border-radius:99px; font-size:.78rem; letter-spacing:.1em; cursor:pointer; color:var(--tinta-2); }
.idioma button[aria-pressed="true"]{ background:var(--acento); color:var(--acento-tinta); }

form{ display:grid; gap:2.6rem; max-width:640px; }
fieldset{ border:0; margin:0; padding:0; display:grid; gap:1.35rem; min-width:0; }
legend{ font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--acento-texto); font-weight:700; margin-bottom:1.1rem; padding:0; }
.dos{ display:grid; grid-template-columns:1fr 1fr; gap:1.35rem; }
.campo{ display:grid; gap:.4rem; min-width:0; }
.campo > label, .campo > .etiqueta{ font-size:.86rem; color:var(--tinta-2); }
.campo em{ font-style:normal; opacity:.7; }
.campo input[type=text], .campo input[type=email], .campo input[type=tel], .campo input[type=password], .campo select, .campo textarea{
  width:100%; background:var(--campo); border:0; border-bottom:1px solid var(--linea); border-radius:3px 3px 0 0;
  padding:.8rem .85rem; font-size:1rem; transition:border-color .2s, background .2s; }
.campo select{ appearance:none; -webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size:5px 5px; background-repeat:no-repeat; padding-right:2.4rem; }
.campo select option{ color:#1E1712; background:#F2E8DA; }
.campo textarea{ min-height:96px; resize:vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus{ outline:0; border-bottom-color:var(--acento); }
.campo.mal input, .campo.mal select, .campo.mal textarea{ border-bottom-color:var(--error); }
.campo.mal .fichas span{ border-color:var(--error); }
.campo .aviso{ font-size:.8rem; color:var(--error); }
.campo .ayuda{ font-size:.8rem; color:var(--tinta-2); }

/* Opciones: fichas que se marcan (varias o una). */
.fichas{ display:flex; flex-wrap:wrap; gap:.5rem; }
.fichas label{ cursor:pointer; position:relative; }
.fichas input{ position:absolute; opacity:0; pointer-events:none; }
.fichas span{ display:inline-block; padding:.5rem 1rem; border:1px solid var(--linea); border-radius:99px; font-size:.9rem; transition:all .2s; }
.fichas input:checked + span{ background:var(--acento); border-color:var(--acento); color:var(--acento-tinta); font-weight:600; }
.fichas input:focus-visible + span{ outline:2px solid var(--acento); outline-offset:2px; }
.archivo{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; padding:1rem; border:1px dashed var(--linea); border-radius:3px; }
.archivo input{ max-width:100%; font-size:.9rem; }

.trampa{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.boton{ display:inline-flex; justify-content:center; align-items:center; gap:.6rem; border:0; cursor:pointer; background:var(--acento); color:var(--acento-tinta);
  padding:1rem 1.6rem; border-radius:3px; font-weight:700; letter-spacing:.08em; font-size:.92rem; text-decoration:none; transition:filter .2s, transform .2s; }
.boton:hover{ filter:brightness(1.08); }
.boton:active{ transform:translateY(1px); }
.boton[disabled]{ opacity:.6; cursor:wait; }
.boton--suave{ background:transparent; color:var(--tinta); border:1px solid var(--linea); font-weight:500; }
.enviar{ display:grid; gap:.8rem; }
.enviar .boton{ width:100%; padding:1.15rem; }
.nota{ font-size:.82rem; color:var(--tinta-2); margin:0; }
.error-general{ color:var(--error); font-size:.9rem; margin:0; }

/* La respuesta al enviar. */
.listo{ max-width:560px; display:grid; gap:1.2rem; padding-top:2rem; }
.listo .estrella{ width:54px; height:54px; }
.listo h2{ font-family:var(--serif); font-weight:300; font-style:italic; font-size:clamp(2rem,3.6vw,2.8rem); line-height:1.05; margin:0; }
.listo .codigo{ font-size:.75rem; letter-spacing:.22em; text-transform:uppercase; color:var(--acento-texto); font-weight:700; }
.listo p{ margin:0; color:var(--tinta-2); }
.acciones{ display:flex; gap:.8rem; flex-wrap:wrap; }

.cargando{ min-height:100vh; display:grid; place-items:center; color:var(--tinta-2); }
.cargando .estrella{ width:56px; height:56px; animation:girar 6s linear infinite; }
@keyframes girar{ to{ transform:rotate(360deg); } }

@media (max-width:900px){
  .hoja{ grid-template-columns:1fr; }
  .hoja__foto{ position:relative; height:auto; min-height:52vh; }
  .tarjetas{ grid-template-columns:1fr; }
  .tarjeta{ min-height:230px; }
}
@media (max-width:560px){ .dos{ grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce){ *{ transition:none!important; animation:none!important; } }

/* ── Barras con el logo de Terranova ─────────────────────────────────────── */
.portada__barra{ display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; padding-bottom:1.4rem; margin-bottom:2rem; border-bottom:1px solid var(--linea); }
.foto__barra{ display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; }
.foto__barra .logo-tn{ height:38px; filter:drop-shadow(0 2px 10px rgba(0,0,0,.5)); }
.sigla--publica{ margin:0; color:var(--acento-texto); font-weight:700; letter-spacing:.2em; }

[hidden]{ display:none!important; }
.opciones label{ white-space:nowrap; }

/* ── Varias fotos por formulario: se funden una en otra, con un acercamiento lento ── */
.diapo{ position:absolute; inset:0; z-index:-2; background-size:cover; background-position:center; opacity:0;
  transform:scale(1.06); transition:opacity 1.8s ease, transform 9s ease-out; }
.diapo.activa{ opacity:1; transform:scale(1); }
.pie-foto{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:1.1rem; }
.pie-foto .lugar{ margin:0 !important; }
.puntos{ display:flex; gap:.4rem; }
.puntos i{ width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.4); transition:all .4s; }
.puntos i.activo{ width:20px; border-radius:99px; background:#fff; }

/* ── Portada: un encabezado sobrio y la casa al cierre ─────────────────────── */
.portada__barra{ border-bottom:0; padding-bottom:0; margin-bottom:0; }
.portada__barra .marca b{ font-size:1rem; }
.portada__hero{ padding:4.5rem 0 3rem; max-width:62ch; }
.portada__ojo{ display:block; font-size:.72rem; letter-spacing:.3em; text-transform:uppercase; color:var(--acento-texto); font-weight:700; margin-bottom:1rem; }
.portada__hero h1{ margin:0 0 1.2rem; max-width:18ch; font-size:clamp(2.4rem,5vw,3.8rem); }
.portada__hero p{ margin:0; color:var(--tinta-2); font-size:1.06rem; line-height:1.7; }
.cierre{ margin-top:4.5rem; padding-top:2.2rem; border-top:1px solid var(--linea); display:flex; flex-direction:column; align-items:center; gap:.9rem; }
.cierre .logo-tn{ height:40px; opacity:.92; }
.cierre p{ margin:0; font-size:.62rem; letter-spacing:.3em; text-transform:uppercase; color:var(--tinta-2); font-weight:700; }
@media (max-width:900px){ .hoja__foto{ position:relative; } .portada__hero{ padding-top:3rem; } }

/* ── Portada: el sello en la esquina (sin títulos) ─────────────────────────── */
.barra{ display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; margin-bottom:2.6rem; }
.sello{ display:inline-flex; align-items:center; gap:.9rem; }
.sello .estrella{ width:34px; height:34px; }
.sello > i{ display:block; width:1px; height:34px; background:linear-gradient(to bottom, transparent, rgba(234,223,206,.45), transparent); }
.sello > span{ display:flex; flex-direction:column; line-height:1.1; }
.sello b{ font-size:.86rem; font-weight:700; letter-spacing:.42em; color:var(--tinta); }
.sello em{ font-family:var(--serif); font-style:italic; font-weight:300; font-size:.95rem; color:var(--acento-texto); letter-spacing:.02em; margin-top:.15rem; }
.sesion{ display:flex; align-items:center; gap:.8rem; font-size:.84rem; color:var(--tinta-2); }
.sesion button{ background:none; border:1px solid var(--linea); color:var(--tinta-2); border-radius:99px; padding:.32rem .85rem; cursor:pointer; font-size:.78rem; }
.sesion button:hover{ color:var(--tinta); border-color:rgba(234,223,206,.4); }