/* ============================================================
   Maquetacion CORPORATIVO
   Pensada para convenciones y eventos de empresa: logotipos
   arriba, pildoras de color, tramas de puntos y bloques de datos.
   Los colores salen de la paleta, asi que cada empresa puede
   ponerle los suyos desde Diseño.
   ============================================================ */

.layout-corporativo{background:var(--c-fondo)}

/* ---------- Trama de puntos, como en los carteles ---------- */
.layout-corporativo .punteado{
  background-image:radial-gradient(currentColor 1.4px,transparent 1.4px);
  background-size:14px 14px
}

/* ---------- Franja de logotipos ---------- */
.layout-corporativo .franja-logos{
  background:var(--c-fondo);padding:26px 20px 18px;border-bottom:1px solid rgba(27,79,156,.12)
}
.layout-corporativo .franja-logos-txt{color:var(--c-acento);letter-spacing:.2em}

/* En el pie (fondo azul) los logos van dentro de una pastilla blanca:
   asi conservan sus colores de marca y siempre se leen bien. */
.layout-corporativo .franja-logos.en-pie{
  background:transparent;border:0;padding:0 20px 26px
}
.layout-corporativo .franja-logos.en-pie .franja-logos-fila{
  display:inline-flex;background:#fff;border-radius:18px;
  padding:16px clamp(20px,5vw,32px);
  box-shadow:0 12px 30px rgba(0,0,0,.20)
}

/* ---------- Portada ---------- */
.layout-corporativo .portada-inv{
  min-height:auto;padding:54px 22px 70px;text-align:center;
  background-color:var(--c-fondo);color:var(--c-texto)
}
.layout-corporativo .portada-inv:not(.con-foto){
  background-image:linear-gradient(180deg,#fff 0%,var(--c-tarjeta) 100%)
}
.layout-corporativo .portada-inv.con-foto{color:#fff}
.layout-corporativo .portada-int{max-width:820px}

.layout-corporativo .nombres{
  font-weight:600;font-size:clamp(38px,9vw,68px);line-height:1.03;
  letter-spacing:-.02em;color:var(--c-acento)
}
.layout-corporativo .portada-inv.con-foto .nombres{color:#fff}

/* El texto de arriba se convierte en pildora verde */
.layout-corporativo .etiqueta-sup{
  order:1;display:inline-block;align-self:center;
  background:var(--c-acento2);color:#fff;
  padding:11px 30px;border-radius:999px;
  font-size:clamp(15px,3.6vw,21px);font-weight:600;
  letter-spacing:.01em;text-transform:none;margin:22px 0 0
}
.layout-corporativo .portada-int{display:flex;flex-direction:column}
.layout-corporativo .fecha-portada{
  order:2;font-size:14px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--c-acento);font-weight:600;margin:22px 0 0
}
.layout-corporativo .portada-int .adorno{display:none}
.layout-corporativo .frase{
  order:3;font-style:normal;font-size:clamp(15px,3.8vw,18px);
  font-weight:500;margin-top:14px;opacity:.9;max-width:620px
}
.layout-corporativo .flecha-abajo{display:none}

/* ---------- Secciones ---------- */
.layout-corporativo .seccion{padding:52px 22px}
.layout-corporativo .seccion:nth-of-type(even){background:var(--c-tarjeta)}
.layout-corporativo .seccion .int{max-width:900px}

.layout-corporativo .titulo{
  font-weight:600;color:var(--c-acento);letter-spacing:-.01em;
  font-size:clamp(26px,5.6vw,38px);margin-bottom:10px
}
.layout-corporativo .titulo::after{
  width:64px;height:4px;background:var(--c-acento2);border-radius:999px;opacity:1;margin-top:14px
}
.layout-corporativo .titulo + .parrafo,
.layout-corporativo .titulo + .nota{font-size:15.5px;opacity:.85;margin-bottom:22px}

/* ---------- Cuenta regresiva ---------- */
.layout-corporativo .cuenta .cr{
  background:var(--c-acento);border:0;border-radius:14px;padding:18px 12px;min-width:84px
}
.layout-corporativo .cuenta .cr b{color:#fff;font-weight:600;font-size:32px}
.layout-corporativo .cuenta .cr small{color:#fff;opacity:.85;letter-spacing:.12em}

/* ---------- Datos del evento en bloques ---------- */
.layout-corporativo .tarjeta-lugar{
  background:var(--c-acento);color:#fff;border:0;border-radius:22px;
  padding:34px 26px;max-width:560px;box-shadow:0 16px 40px rgba(27,79,156,.22)
}
.layout-corporativo .tarjeta-lugar .titulo{color:#fff;font-size:clamp(20px,4.4vw,26px)}
.layout-corporativo .tarjeta-lugar .titulo::after{background:var(--c-acento2)}
.layout-corporativo .lugar-nombre{color:#fff;font-weight:600;font-size:20px}
.layout-corporativo .lugar-hora{color:#fff;opacity:.9;font-weight:600;letter-spacing:.06em}
.layout-corporativo .lugar-dir{color:#fff;opacity:.88;font-size:15px}
.layout-corporativo .lugar-nota{color:#fff;opacity:.8}
.layout-corporativo .icono-lugar{color:#fff}
.layout-corporativo .tarjeta-lugar .btn-inv{
  background:#fff;color:var(--c-acento);border-color:#fff
}
.layout-corporativo .tarjeta-lugar .btn-inv:hover{background:var(--c-acento2);border-color:var(--c-acento2);color:#fff}

/* ---------- Detalles en tarjetas ---------- */
.layout-corporativo .detalle{
  background:#fff;border:0;border-radius:18px;padding:24px 18px;
  box-shadow:0 10px 26px rgba(22,40,63,.08)
}
.layout-corporativo .etiqueta-det{color:var(--c-acento2);font-weight:600;letter-spacing:.14em}
.layout-corporativo .detalle b{color:var(--c-acento);font-weight:600;font-size:20px}

/* ---------- Ponentes ---------- */
.layout-corporativo .ponente{
  background:#fff;border:0;border-radius:20px;padding:30px 22px;
  box-shadow:0 12px 30px rgba(22,40,63,.10);position:relative;overflow:hidden
}
.layout-corporativo .ponente-etiqueta{
  background:var(--c-acento);color:#fff;border-radius:999px;
  padding:6px 18px;letter-spacing:.14em;font-weight:600;margin-bottom:14px
}
.layout-corporativo .ponente-nombre{
  color:var(--c-acento2);font-weight:600;font-size:20px;letter-spacing:-.01em
}
.layout-corporativo .ponente-cargo{font-size:14px;opacity:.75}
.layout-corporativo .ponente-tema{
  font-style:normal;font-weight:500;color:var(--c-acento);
  border-top:1px solid rgba(27,79,156,.14);padding-top:12px;margin-top:12px
}

/* ---------- Tarjetas generales ---------- */
.layout-corporativo .tarjeta-inv{
  background:#fff;border:0;border-radius:20px;
  box-shadow:0 12px 30px rgba(22,40,63,.10);padding:28px 22px
}
.layout-corporativo .tarjeta-inv h3{color:var(--c-acento);font-weight:600;font-size:21px}
.layout-corporativo .icono-tarjeta{color:var(--c-acento2)}

/* ---------- Itinerario / agenda ---------- */
.layout-corporativo .linea-tiempo::before{background:var(--c-acento);opacity:.25}
.layout-corporativo .linea-tiempo .punto{
  border:0;background:var(--c-acento2);width:13px;height:13px;top:9px
}
.layout-corporativo .hora-it{
  color:var(--c-acento);font-weight:600;letter-spacing:.1em;font-size:12px
}
.layout-corporativo .act-it{font-weight:500;font-size:18px;color:var(--c-texto)}

/* ---------- Botones tipo pildora ---------- */
.layout-corporativo .btn-inv{
  background:var(--c-acento);color:#fff;border-color:var(--c-acento);
  border-radius:999px;padding:13px 32px;font-weight:600;
  font-size:14px;letter-spacing:.02em;text-transform:none
}
.layout-corporativo .btn-inv:hover{background:var(--c-acento2);border-color:var(--c-acento2);color:#fff}
.layout-corporativo .btn-inv.lleno{background:var(--c-acento2);border-color:var(--c-acento2)}

/* ---------- Galeria ---------- */
.layout-corporativo .galeria-inv figure{border-radius:18px;aspect-ratio:4/3}

/* ---------- Formulario de registro ---------- */
.layout-corporativo .sec-rsvp .int{
  background:#fff;border-radius:24px;padding:38px 24px;
  box-shadow:0 16px 40px rgba(22,40,63,.10)
}
.layout-corporativo .seccion.sec-rsvp{background:var(--c-tarjeta)}
.layout-corporativo .campo-inv input,
.layout-corporativo .campo-inv textarea{
  background:var(--c-tarjeta);border-color:rgba(27,79,156,.2);border-radius:12px
}
.layout-corporativo .campo-inv label,
.layout-corporativo .campo-inv .label-grupo{
  color:var(--c-acento);font-weight:600;letter-spacing:.08em
}
.layout-corporativo .opciones-rsvp span{
  background:var(--c-tarjeta);border-color:rgba(27,79,156,.2);border-radius:999px;font-weight:500
}
.layout-corporativo .opciones-rsvp input:checked + span{
  background:var(--c-acento);border-color:var(--c-acento);color:#fff
}
.layout-corporativo .gracias{border-color:var(--c-acento2);border-radius:20px}
.layout-corporativo .palomita{background:var(--c-acento2)}

/* ---------- Pie ---------- */
.layout-corporativo .inv-pie{
  background:var(--c-acento);color:#fff;border-top:0;padding-top:34px
}
.layout-corporativo .inv-pie .adorno{color:var(--c-acento2)}
.layout-corporativo .inv-pie p{font-weight:600;font-size:24px}
.layout-corporativo .inv-pie .fecha{color:#fff;opacity:.85}
.layout-corporativo .inv-pie .creado{color:#fff;opacity:.7}
.layout-corporativo .inv-pie .creado a{color:#fff}
.layout-corporativo .franja-logos.en-pie img{opacity:1}

/* ---------- Barra flotante ---------- */
.layout-corporativo .btn-flotante{
  background:var(--c-acento2);color:#fff;border-radius:999px;font-weight:600;text-transform:none;font-size:14px
}
.layout-corporativo .btn-flotante.secundario{
  background:#fff;color:var(--c-acento);border-color:var(--c-acento)
}