/* =========================
  SOLUTION PAGE (CLEAN)
  - Hero
  - How it's made banner
  - Model exploded (cards + center image + pins + connectors)
  - Benefits
  - Process
  - Prototypes
========================= */

/* -------------------------
  HERO
------------------------- */
.sol-hero{
  padding: 3rem 0;
}

.sol-hero__container{
  display: grid;
  gap: 22px;
  align-items: center;
}

.sol-hero__content h1{
  margin: 0 0 10px;
  line-height: 1.05;
  font-size: clamp(24px, 3vw, 36px);
}

.sol-hero__content .lead{
  margin: 0 0 18px;
  max-width: 70ch;
  line-height: 1.65;
  opacity: .9;
}

.sol-hero__actions{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.sol-hero__badges{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.sol-hero__media{
  border-radius: var(--radius);
  overflow: hidden;
  width: 100%;
}

.sol-hero__media img{
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  object-position: right center;
}

/* -------------------------
  HOW IT'S MADE (banner)
------------------------- */
.sol-model__container{
  display: grid;
  gap: 14px;
  align-items: center;
}

.sol-model__container .lead{
  margin: 0;
  opacity: .9;
  line-height: 1.6;
}

/* =========================
  MODEL - EXPLODED (LIMPIO + SVG WIRES)
========================= */

.model-exploded{
  padding: 3.4rem 0;
  background: #fff;
}

.model-exploded__title{
  margin: 0 0 10px;
  line-height: 1.15;
}

.model-exploded__sub{
  margin: 0 0 18px;
  max-width: 80ch;
  opacity: .85;
  line-height: 1.7;
}

/* ===== Canvas ===== */
.exploded{
  position: relative;
  margin-top: 18px;
  border-radius: 18px;
  background: #f6f7f6;
  border: 1px solid rgba(0,0,0,.05);
  padding: 18px;
  overflow: hidden;

  display: grid;
  gap: 14px;
  grid-template-columns: 1fr; /* mobile */
}

/* ===== Cards ===== */
.exploded__card{
  position: relative;
  background: #fff;
  border-radius: 16px;
  padding: 16px 16px 14px;
  box-shadow: 0 10px 28px rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.04);
  z-index: 3; /* encima de wires */
}

.exploded__card h3{
  margin: 10px 0 6px;
  color: var(--green);
  font-size: 18px;
}

.exploded__card p{
  margin: 0;
  opacity: .85;
  line-height: 1.6;
}

.exploded__icon{
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 18px rgba(47,107,74,.18);
}

.exploded__icon i{ font-size: 20px; }

/* ===== Center ===== */
.exploded__center{
  position: relative;
  border-radius: 18px;
  padding: 16px;
  display: grid;
  place-items: center;
  z-index: 2;
}

.exploded__center img{
  width: min(720px, 100%);
  height: auto;
  display: block;
  object-fit: contain;
}

/* ===== Pins ===== */
.pin{
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(47,107,74,.18);
  z-index: 4; /* encima de wires */
}

/* Ajusta SOLO estos 4 para mover el pin */
.pin--1{ top: 19%; left: 23%; }
.pin--2{ top: 18%; left: 89%; }
.pin--3{ top: 79%; left: 6%; }
.pin--4{ top: 77%; left: 82%; }

/* ===== Dots (en tarjetas) ===== */
.exploded__dot{
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(47,107,74,.18);
  z-index: 4;
  display: none; /* oculto en mobile */
}

/* ===== SVG WIRES ===== */
.exploded__wires{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;         /* debajo de cards + pins */
  pointer-events: none;
  display: none;      /* oculto en mobile */
}

.wire{
  stroke: rgba(0,0,0,.35);
  stroke-width: 2;
  stroke-dasharray: 6 6;
  stroke-linecap: round;
  z-index: 1000;
}

/* ===== Note ===== */
.model-exploded__note{
  margin-top: 16px;
  border-radius: 16px;
  padding: 14px 16px;
  background: rgba(47,107,74,.10);
  border: 1px solid rgba(47,107,74,.14);
  line-height: 1.6;
}

/* =========================
  BENEFITS
========================= */
.benefits{
  margin-top: 18px;
  display: grid;
  gap: 14px;
}

.benefit{
  padding: 18px;
}

.benefit__icon{
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 3px solid rgba(47,107,74,.95);
  color: rgba(47,107,74,.95);
  background: #fff;
  display: grid;
  place-items: center;
  margin-bottom: 10px;
}

.benefit__icon i{ font-size: 18px; }

.benefit h3{
  margin: 0 0 6px;
  color: var(--green);
}

.benefit p{
  margin: 0;
  line-height: 1.65;
  opacity: .9;
}

/* =========================
  PROTOTYPES
========================= */
.proto-grid{
  margin-top: 18px;
  display: grid;
  gap: 16px;
}

.proto-grid-panama{
  margin-top: 18px;
  display: grid;
  gap: 16px;
}

.proto img{
  width: 100%;
  height: 320px;
  object-fit: cover;
  display: block;
}

.proto__body{
  margin: 0;
}

.proto__body h4{ 
  margin: 0 20%;
  text-align: center;
  padding: 3%;
  border-bottom: 2px solid var(--green);
}

.proto__body p{
  margin: 4%;
  opacity: .85;
}
.heritage-img{
  margin: 0;
}

.heritage-img img{
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 2%;
}

/* Mini CTA */
.mini-cta{
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 16px;
  border-radius: 16px;
  background: rgba(47,107,74,.08);
  border: 1px solid rgba(47,107,74,.14);
}

.mini-cta p{
  margin: 0;
  opacity: .9;
}

/* =========================
  PROTOTYPES GROUPS
========================= */
.proto-group{
  margin-top: 4%;
  padding-top: 14px;
  border-top: 4px solid rgba(0,0,0,.08);
}

.proto-group__title{
  margin: 0 0 6px;
  color: var(--green);
}

.proto-group__sub{
  margin: 0 0 14px;
  opacity: .88;
  line-height: 1.7;
}

.proto__tags{
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.proto__tags li{
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(47,107,74,.08);
  border: 1px solid rgba(47,107,74,.14);
  font-weight: 650;
  font-size: .9rem;
}

.proto-group--highlight{
  background: rgba(47,107,74,.06);
  border: 1px solid rgba(47,107,74,.12);
  border-radius: 16px;
  padding: 16px;
}

.proto--featured img{
  height: 280px; /* la cutarra más protagonista */
}

/* =========================
  PROTOTYPES TIMELINE
========================= */
.proto-timeline{
  position: relative;
  margin: 16px 0 18px;
  padding: 14px;
  border-radius: 16px;
  background: rgba(47,107,74,.06);
  border: 1px solid rgba(47,107,74,.12);

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  align-items: center;
}

.proto-timeline__line{
  position: absolute;
  left: 22px;
  right: 22px;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  background: rgb(145, 191, 166);
  z-index: 0;
}

.proto-timeline__item{
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgb(255,255,255);
  border: 1px solid rgba(0,0,0,.06);
  position: relative;
  z-index: 1;
}

.proto-timeline__dot{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(47,107,74,.35);
  display: grid;
  place-items: center;
  color: rgba(47,107,74,1);
  box-shadow: 0 10px 20px rgba(0,0,0,.08);
  flex: 0 0 auto;
}

.proto-timeline__dot img{
  width: auto;
  height: 35px;
  border-radius: 100%;
}

.proto-timeline__title{
  font-weight: 900;
  color: rgba(0,0,0,.78);
  line-height: 1.15;
}
.proto-timeline__sub{
  font-size: .9rem;
  opacity: .82;
  line-height: 1.3;
}

.proto-timeline__item.is-active{
  background: rgb(183, 199, 191);
  border-color: rgba(47,107,74,.16);
}
.proto-timeline__item.is-active .proto-timeline__dot{
  border-color: rgba(47,107,74,1);
  box-shadow: 0 0 0 6px rgba(47,107,74,.10);
}

.proto-timeline__item--panama .proto-timeline__dot{
  border-color: rgba(31,60,136,.55);
  color: #1f3c88;
}
.proto-timeline__item--panama .proto-timeline__title{
  color: #1f3c88;
}

/* Panama flag */
.panama-flag{
  width: 18px;
  height: 12px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.15);
  background:
    linear-gradient(#ffffff,#ffffff) top left/50% 50% no-repeat,
    linear-gradient(#1f3c88,#1f3c88) top right/50% 50% no-repeat,
    linear-gradient(#d91c1c,#d91c1c) bottom left/50% 50% no-repeat,
    linear-gradient(#ffffff,#ffffff) bottom right/50% 50% no-repeat;
}
.panama-flag--lg{ width:26px; height:18px; }

/* =========================
  ORIGIN FEATURE (Prototype)
========================= */
.proto-origin{
  margin-top: 18px;
}

.proto-origin__grid{
  display: grid;
  grid-template-columns: .5fr 1fr;
  gap: 2%;
  align-items: stretch;
}

/* Left media */
.proto-origin__media{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: #f2f3f2;
  border: 1px solid rgba(0,0,0,.10);
}

.proto-origin__media img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  /* mantiene look 16:10-ish */
  min-height: 360px;
}

.proto-origin__badge{
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;

  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.12);
  font-weight: 900;
  font-size: .85rem;
  color: rgba(47,107,74,1);
  box-shadow: 0 10px 24px rgba(0,0,0,.16);
}

/* Right panel */
.proto-origin__panel{
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 12px;
}

.proto-origin__head{
  padding-top: 5%;
}

.proto-origin__title{
  margin: 0 0 6px;
  color: var(--green);
}

.proto-origin__intro{
  margin: 0;
  opacity: .88;
  line-height: 1.7;
}

/* Card */
.proto-origin__card{
  background: #fff;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 18px;
  padding: 4%;
  margin: auto;
  box-shadow: 0 10px 28px rgba(0,0,0,.10);
}

.proto-origin__name{
  margin: 0 0 8px;
  font-weight: 900;
}

.proto-origin__desc{
  margin: 0 0 12px;
  opacity: .9;
  line-height: 1.7;
}

.proto-origin__tags{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 5%;
  justify-content: center;
}

.proto-origin__tags li{
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(47,107,74,.08);
  border: 1px solid rgba(47,107,74,.14);
  font-weight: 700;
  font-size: .9rem;
}

.proto-subgroup{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2%;
}



/* =========================
  PROTO MEDIA – FRONT & BACK
========================= */
.proto-media.duo{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  border-radius: 14px;
  overflow: hidden;
}

.proto-media.duo figure{
  margin: 0;
  position: relative;
}

.proto-media.duo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Caption sutil */
.proto-media.duo figcaption{
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(0,0,0,.08);
}

/* Destacar la cutarra */
.proto--featured .proto-media.duo img{
  height: 320px;
}

/* =========================
  PANAMA: side-by-side card
========================= */
.proto-grid-panama{
  grid-template-columns: 1fr .8fr;
  gap:16px;
  align-items: start;
}

/* =========================
  HERITAGE
========================= */
.proto--heritage{ padding: 1% 10px; background-color: #fff; border-radius: 2%;}

.heritage-title{
  display:flex;
  gap:10px;
  margin-bottom: 6px;
  justify-content: center;
}
.heritage-title h4{ margin:0; text-align: center;}

.heritage-sub{
  margin: 0 0 12px;
  opacity:.88;
  line-height:1.7;
}

.heritage-points{
  margin: 0 10% 5%;
  padding-left: 18px;
  line-height:1.7;
  opacity:.9;
}
.heritage-bar{
  margin-top: 14px;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg,#ff0000,#fff,#fff,#0000ff);
  border: 1px solid rgba(0,0,0,.06);
}

/* =========================
  RESPONSIVE
========================= */
@media (max-width: 900px){
  .proto-origin__grid{
    grid-template-columns: 1fr;
  }

  .proto-origin__media img{
    min-height: 260px;
  }
}

@media (max-width: 480px){
  .proto-origin__badge{
    font-size: .8rem;
    padding: 7px 10px;
  }

  .proto-origin__card{
    padding: 14px;
  }
}

/* Responsive */
@media (max-width: 820px){
  .proto-timeline{ grid-template-columns: 1fr; gap: 10px; }
  .proto-timeline__line{
    left: 32px; right:auto; top: 18px; bottom: 18px;
    width: 2px; height:auto; transform:none;
  }
}
@media (max-width: 700px){
  .proto-grid-panama{ grid-template-columns: 1fr; }
  .proto-subgroup{
    grid-template-columns: 1fr;
    height: auto;
  }
}


/* -------------------------
  DESKTOP grids
------------------------- */
@media (min-width: 900px){

  .benefits{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .proto-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  
  .hero-cap__text{ 
    display: none; 
  }

  .sol-hero__container{
    grid-template-columns: 1.1fr .9fr;
  }
}

/* =========================
  DESKTOP LAYOUT
========================= */
@media (min-width: 980px){

  .exploded{
    padding: 22px;
    grid-template-columns: 1fr 1.25fr 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 18px;
  }

  .exploded__card--tl{ 
    grid-column: 1; 
    grid-row: 1; 
  }
  .exploded__card--bl{ 
    grid-column: 1; 
    grid-row: 2; 
  }

  .exploded__center{ 
    grid-column: 2; 
    grid-row: 1 / span 2; 
  }

  .exploded__card--tr{ 
    grid-column: 3; 
    grid-row: 1; 
  }
  
  .exploded__card--br{ 
    grid-column: 3; 
    grid-row: 2; 
  }

  /* Mostrar wires + dots en desktop */
  .exploded__wires{ 
    display: block; 
  }

  .exploded__dot{ 
    display: block; 
  }

  /* Dots hacia el centro */
  .exploded__card--tl .exploded__dot,
  .exploded__card--bl .exploded__dot{
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
  }

  .exploded__card--tr .exploded__dot,
  .exploded__card--br .exploded__dot{
    left: -6px;
    top: 50%;
    transform: translateY(-50%);
  }
}

/* Mobile: imágenes en columna */

@media (max-width: 480px){
  .proto-media.duo{
    grid-template-columns: 1fr;
  }

  .proto--featured .proto-media.duo img{
    height: 200px;
  }
  
  .proto--featured img{ height: 240px; }
}