/* =========================================================
   BAGUET COSTA RICA V2
   Un nuevo país. Un nuevo comienzo. No estás solo.
   ========================================================= */

:root {
  --bcr-navy:#102f53;
  --bcr-blue:#175d96;
  --bcr-sky:#45bfd5;
  --bcr-green:#11875d;
  --bcr-green2:#42b883;
  --bcr-yellow:#ffd84a;
  --bcr-coral:#ff806c;
  --bcr-cream:#fffdf7;
}

/* ---------- HERO V2 ---------- */

.hero {
  position:relative;
  overflow:hidden;
  padding:95px 0 110px;
  background:
    radial-gradient(circle at 78% 18%,rgba(255,216,74,.28),transparent 22%),
    radial-gradient(circle at 91% 55%,rgba(69,191,213,.24),transparent 28%),
    radial-gradient(circle at 10% 82%,rgba(66,184,131,.18),transparent 27%),
    linear-gradient(135deg,#fffdf7 0%,#f2fbf7 45%,#eaf8fb 100%);
}

.hero::before {
  content:"";
  position:absolute;
  width:430px;
  height:430px;
  border-radius:50%;
  border:1px solid rgba(17,135,93,.12);
  left:-220px;
  bottom:-220px;
}

.hero::after {
  content:"";
  position:absolute;
  width:560px;
  height:560px;
  border-radius:50%;
  border:1px solid rgba(23,93,150,.10);
  right:-290px;
  top:-300px;
}

.hero-grid {
  position:relative;
  z-index:2;
}

/* ---------- NUEVO SLOGAN ---------- */

.bcr-kicker {
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:8px 13px;
  border-radius:999px;
  background:rgba(17,135,93,.09);
  border:1px solid rgba(17,135,93,.16);
  color:var(--bcr-green);
  font-size:12px;
  font-weight:900;
  letter-spacing:.07em;
  text-transform:uppercase;
}

.bcr-slogan {
  margin:19px 0 20px;
  max-width:720px;
  font-size:clamp(46px,5.1vw,72px);
  line-height:.99;
  letter-spacing:-.045em;
  color:var(--bcr-navy);
}

.bcr-slogan .begin {
  color:var(--bcr-blue);
}

.bcr-slogan .alone {
  color:var(--bcr-green);
}

.bcr-intro {
  max-width:680px;
  font-size:18px;
  line-height:1.7;
  color:#52677a;
}

.bcr-service-line {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:23px 0 27px;
}

.bcr-service-line span {
  padding:7px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(16,47,83,.10);
  color:#38566d;
  font-size:12px;
  font-weight:800;
}

/* ---------- ESCENARIO DEL ROBOT ---------- */

.hero-brand-area {
  position:relative;
  min-height:610px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  isolation:isolate;
}

.hero-robot-wrap {
  position:absolute;
  z-index:2;
  top:-75px;
  left:50%;
  transform:translateX(-50%);
  width:min(515px,44vw);
  height:455px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Anillo exterior */
.hero-robot-wrap::before {
  content:"";
  position:absolute;
  width:410px;
  height:410px;
  border-radius:50%;
  border:2px solid rgba(23,93,150,.13);
  box-shadow:
    0 0 0 14px rgba(255,255,255,.18),
    0 0 70px rgba(69,191,213,.15);
  animation:bcrOrbitPulse 4.5s ease-in-out infinite;
}

/* Segundo anillo */
.hero-robot-wrap::after {
  content:"✦  ·  ★  ·  ✦  ·  ★  ·  ✦  ·  ★";
  position:absolute;
  width:455px;
  height:455px;
  border-radius:50%;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding-top:3px;
  box-sizing:border-box;
  color:rgba(23,93,150,.50);
  font-size:15px;
  letter-spacing:16px;
  animation:bcrStarsRotate 18s linear infinite;
}

/* Estrellas decorativas adicionales */
.robot-glow::before {
  content:"★";
  position:absolute;
  left:-38px;
  top:80px;
  color:var(--bcr-yellow);
  font-size:23px;
  animation:bcrTwinkle 2.3s ease-in-out infinite;
}

.robot-glow::after {
  content:"✦";
  position:absolute;
  right:-48px;
  bottom:78px;
  color:var(--bcr-green2);
  font-size:28px;
  animation:bcrTwinkle 2.8s ease-in-out infinite reverse;
}

.robot-glow {
  position:absolute;
  width:355px;
  height:355px;
  border-radius:50%;
  background:
    radial-gradient(circle,
      rgba(255,216,74,.35) 0%,
      rgba(69,191,213,.17) 43%,
      rgba(66,184,131,.08) 60%,
      transparent 72%);
  animation:robotGlow 4s ease-in-out infinite;
}

.hero-robot {
  position:relative;
  z-index:3;
  width:100%;
  max-width:485px;
  height:auto;
  object-fit:contain;
  filter:
    drop-shadow(0 26px 24px rgba(16,47,83,.23));
  animation:bcrRobotHide 4.2s ease-in-out infinite;
}

/* La tarjeta queda delante del robot */
.hero-brand-area .welcome-card {
  position:relative;
  z-index:5;
  width:100%;
  margin-top:295px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.75);
  box-shadow:
    0 30px 80px rgba(16,47,83,.16),
    0 8px 25px rgba(16,47,83,.08);
  backdrop-filter:blur(10px);
}

.hero-brand-area .welcome-card::before {
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:5px;
  background:linear-gradient(
    90deg,
    var(--bcr-green),
    var(--bcr-sky),
    var(--bcr-yellow)
  );
}

/* ---------- MOVIMIENTO ---------- */

@keyframes bcrRobotHide {
  0%,100% {
    transform:translateY(-9px) rotate(-2deg);
  }

  50% {
    transform:translateY(42px) rotate(2deg);
  }
}

@keyframes bcrStarsRotate {
  from { transform:rotate(0deg); }
  to   { transform:rotate(360deg); }
}

@keyframes bcrOrbitPulse {
  0%,100% {
    transform:scale(.96);
    opacity:.55;
  }

  50% {
    transform:scale(1.04);
    opacity:1;
  }
}

@keyframes bcrTwinkle {
  0%,100% {
    opacity:.35;
    transform:scale(.75) rotate(0deg);
  }

  50% {
    opacity:1;
    transform:scale(1.25) rotate(15deg);
  }
}

/* ---------- BOTONES ---------- */

.hero .btn-primary {
  background:linear-gradient(135deg,var(--bcr-blue),var(--bcr-navy));
  box-shadow:0 12px 30px rgba(23,93,150,.20);
  transition:.25s ease;
}

.hero .btn-primary:hover {
  transform:translateY(-3px);
  box-shadow:0 18px 38px rgba(23,93,150,.28);
}

.hero .btn-secondary {
  transition:.25s ease;
}

.hero .btn-secondary:hover {
  transform:translateY(-3px);
  border-color:rgba(17,135,93,.35);
}

/* ---------- TARJETAS CON VIDA ---------- */

.feature-card,
.service-grid article {
  position:relative;
  overflow:hidden;
  transition:
    transform .28s ease,
    box-shadow .28s ease,
    border-color .28s ease;
}

.feature-card:hover,
.service-grid article:hover {
  transform:translateY(-8px);
  border-color:rgba(69,191,213,.40);
  box-shadow:0 22px 45px rgba(16,47,83,.11);
}

.feature-card::after,
.service-grid article::after {
  content:"";
  position:absolute;
  width:90px;
  height:90px;
  right:-45px;
  bottom:-45px;
  border-radius:50%;
  background:rgba(69,191,213,.07);
  transition:.3s ease;
}

.feature-card:hover::after,
.service-grid article:hover::after {
  transform:scale(1.8);
}

/* ---------- MOBILE ---------- */

@media(max-width:850px) {

  .bcr-slogan {
    font-size:clamp(42px,12vw,58px);
  }

  .hero-brand-area {
    min-height:auto;
    display:block;
  }

  .hero-robot-wrap {
    position:relative;
    top:auto;
    left:auto;
    transform:none;
    width:min(400px,92vw);
    height:390px;
    margin:25px auto -70px;
  }

  .hero-robot-wrap::before {
    width:310px;
    height:310px;
  }

  .hero-robot-wrap::after {
    width:350px;
    height:350px;
  }

  .hero-brand-area .welcome-card {
    margin-top:0;
  }

  .robot-glow {
    width:280px;
    height:280px;
  }
}

@media(prefers-reduced-motion:reduce) {
  .hero-robot,
  .hero-robot-wrap::before,
  .hero-robot-wrap::after,
  .robot-glow,
  .robot-glow::before,
  .robot-glow::after {
    animation:none;
  }
}

/* =========================================================
   BCR V2.1 - AJUSTE DE PROFUNDIDAD DEL ROBOT
   ========================================================= */

/* Más espacio para que respire el personaje */
.hero-brand-area {
  min-height: 640px;
}

/* Subimos el escenario completo */
.hero-robot-wrap {
  top: -105px;
  width: min(535px, 46vw);
  height: 475px;
}

/* Robot un poco más grande */
.hero-robot {
  max-width: 510px;
}

/* La tarjeta baja para ocultar solamente la base del robot */
.hero-brand-area .welcome-card {
  margin-top: 385px;
}

/* Movimiento: baja detrás del portal, pero mucho menos */
@keyframes bcrRobotHide {
  0%,100% {
    transform: translateY(-20px) rotate(-2deg);
  }

  50% {
    transform: translateY(15px) rotate(2deg);
  }
}

/* Órbita ligeramente mayor */
.hero-robot-wrap::before {
  width: 435px;
  height: 435px;
}

.hero-robot-wrap::after {
  width: 485px;
  height: 485px;
}

/* En móvil tampoco esconder demasiado */
@media(max-width:850px) {

  .hero-brand-area {
    min-height:auto;
  }

  .hero-robot-wrap {
    top:auto;
    width:min(410px,92vw);
    height:390px;
    margin:25px auto -25px;
  }

  .hero-brand-area .welcome-card {
    margin-top:0;
  }
}