/* styles.css — Nubikids (diseño 1 + info nueva) */
:root{
  --blue-900:#0a3871;
  --blue-800:#124a8a;
  --blue-700:#1e63a9;
  --blue:#0c7adf;
  --sky:#5acee8;
  --teal:#63dbc6;
  --orange:#ff7a00;
  --ink:#14324d;
  --muted:#5b7088;
  --card:#ffffff;
  --bg:#fffefc;
  --shadow:0 10px 30px rgba(16,44,84,.12);
  --radius:18px;
  --radius-lg:26px;
  --maxw:1100px;
}

/* Reset */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:var(--ink); background:var(--bg); line-height:1.5}
.wrap{width:min(var(--maxw), 92%); margin-inline:auto}

/* Header */
.site-header{
  position:sticky; top:0; z-index:20;
  background:linear-gradient(180deg, var(--blue) 0%, var(--sky) 100%);
  color:#fff; box-shadow:0 4px 20px rgba(0,0,0,.06);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0}
.brand{display:flex; align-items:center; gap:2px; text-decoration:none}
.brand-logo{width:50px; height:50px; object-fit:contain; }
.brand-text{font-family: Fredoka, Inter, sans-serif; font-weight:800; font-size:1.50rem; color:#fff; letter-spacing:.3px}
.main-nav{display:flex; gap:16px}
.main-nav a{color:#eaf6ff; text-decoration:none; font-weight:700}
.nav-actions{display:flex; gap:10px}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 14px; border-radius:12px; font-weight:800; text-decoration:none; border:1px solid transparent; cursor:pointer}
.btn-primary{background:var(--orange); color:#fff; box-shadow:var(--shadow)}
.btn-ghost{background:#ffffff; color:var(--blue-900); border-color:#e6eef7}

/* Hero */
.hero{background:linear-gradient(180deg, #3aa3ff 0%, var(--sky) 55%, #e9fff9 100%); padding:64px 0 40px}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:26px; align-items:center}
.hero-copy h1{font-family: Fredoka, Inter, sans-serif; font-weight:800; font-size:clamp(28px,4vw,44px); line-height:1.1; margin:0 0 10px}
.lead{opacity:.9}
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:.9rem; color:#08335c; background:#ffffffa6; padding:8px 12px; border-radius:999px; border:1px solid #eef2f7}
.eyebrow .dot{width:10px; height:10px; background:var(--orange); border-radius:50%}
.cta{display:flex; gap:10px; margin-top:14px; flex-wrap:wrap}
.privacy{margin-top:10px; font-size:.9rem}
.phone{width:100%; aspect-ratio:9/16; border-radius:26px; background:linear-gradient(160deg,#fff,#f2f7ff); border:10px solid #0f172a0f; position:relative; overflow:hidden; box-shadow:var(--shadow)}
.status{position:absolute; top:12px; left:12px; background:#fff; border:1px solid #e8eef7; border-radius:12px; padding:8px 10px; font-size:.8rem; color:var(--muted)}
.feed{position:absolute; inset:60px 0 0 0; padding:12px 12px 18px; overflow:auto; display:grid; gap:12px}
.card{background:#fff; border:1px solid #e8eef7; border-radius:16px; padding:12px}
.bold{font-weight:800}
.small{font-size:.9rem}
.row{display:flex; align-items:center; gap:10px}
.between{justify-content:space-between}
.minirow{align-items:center}
.avatar{width:40px; height:40px; border-radius:10px}
.tag{display:inline-flex; align-items:center; gap:6px; font-size:.75rem; padding:6px 10px; border-radius:999px; background:#fdf3ec; color:#a14000}
.tag.blue{background:#e9f2ff; color:#135db1}
.hero-photo{width:100%; border-radius:12px; margin-top:10px}
.ref-note{font-size:.85rem; margin:6px 6px 0}

/* Sections */
.section{padding:56px 0}
.section.alt{background:linear-gradient(0deg,#d2fff4 0%, #effbf8 100%)}
.section-title{font-family: Fredoka, Inter, sans-serif; font-size:clamp(24px,3vw,36px); margin:0 0 10px}
.muted{color:var(--muted)}
.orange{color:var(--orange)}
.white{color:var(--bg)}
.ink{color:var(--ink)}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr)}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr)}
.gap{gap:18px}

/* Feature / Cardish */
.feature{background:var(--card); border-radius:var(--radius); padding:18px; border:1px solid #eef2f7; box-shadow:var(--shadow); transition:transform .2s ease, box-shadow .2s ease}
.feature:hover{transform:translateY(-3px); box-shadow:0 12px 28px rgba(0,0,0,.1)}
.icon{width:38px; height:38px; border-radius:10px; display:grid; place-items:center; color:#fff; background:var(--blue-700); margin-bottom:10px; font-size:20px}
.icon.orange{background:var(--orange)}
.icon.mint{background:var(--teal)}
.cardish{background:var(--card); border:1px solid #e7eef7; border-radius:var(--radius-lg); padding:20px; box-shadow:var(--shadow); transition:transform .2s ease, box-shadow .2s ease}
.cardish:hover{transform:translateY(-3px); box-shadow:0 12px 28px rgba(0,0,0,.1)}
.num{width:32px; height:32px; border-radius:999px; background:var(--blue-700); color:#fff; display:grid; place-items:center; font-weight:800; margin-bottom:8px}

/* Pricing */
.plan .price{font-size:2rem; font-weight:900; color:var(--blue-900); margin-top:2px}
.plan .ul{list-style:none; padding:0; margin:12px 0 16px}
.plan .ul li{margin:6px 0}
.plan.highlight{outline:4px solid #ffd9b3}
.full{width:100%}

/* Contact */
.contact .field{display:flex; flex-direction:column; gap:6px}
.contact input, .contact textarea{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid #e6eaf2; font:inherit;
}
.mt-10{
  margin-top: 10px;
}

.contact textarea{resize:vertical}

/* Hero Carousel */
.hero-carousel {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.carousel-track {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.carousel-slide {
  min-width: 100%;
  height: 100vh;
  background-size: cover;
  background-position: center;
  position: relative;
}

.carousel-content-end {
  position: absolute;
  bottom: 80%;
  left: 10%;
  color: white;
  max-width: 800px;
  justify-content: center;
}

.carousel-content {
  position: absolute;
  bottom: 20%;
  left: 10%;
  color: white;
  max-width: auto;
}

.carousel-content h1, .carousel-content-end h1  {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 1rem;
  text-shadow: 0 4px 10px rgba(0,0,0,0.6);
}

.carousel-content p, .carousel-content-end P  {
  font-size: 2rem;
  margin-bottom: 1.5rem;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

.carousel-content .btn, .carousel-content-end .btn  {
  padding: 12px 24px;
  font-size: 1.1rem;
}

.carousel-btn {
  position: absolute;
  top: 50%;
  left: auto;
  right: auto;
  transform: translateY(-50%);
  display: flex;
  justify-content: center;
  align-items: 50%;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(0,0,0,0.5);
  color: white;
  font-size: 3rem;
  border: none;
  cursor: pointer;
  z-index: 10;
  transition: background 0.3s;
}

.carousel-btn:hover {
  background: rgba(0,0,0,0.8);
}

.carousel-btn.prev { left: 20px; }
.carousel-btn.next { right: 20px; }

.carousel-dots {
  position: absolute;
  bottom: 20px;
  width: 100%;
  text-align: center;
}
.carousel-dots button {
  width: 12px;
  height: 12px;
  margin: 0 6px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.6);
  cursor: pointer;
  transition: background 0.3s;
}
.carousel-dots button.active {
  background: #ff7a59; /* color Nubikids */
}

.step.cardish img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100px;
  height: 100px;
  object-fit: contain;
}

/* Nubikids testimonios */
:root{
  --nk-primary:#1e88e5;
  --nk-accent:#ff7a00;
  --nk-ink:#152238;
  --nk-muted:#667085;
  --nk-soft:#f1fbff;
  --nk-card:#ffffff;
  --nk-border:#e8eef7;
  --nk-shadow:0 12px 30px rgba(0,0,0,.08);
  --nk-radius:20px;
}

.nk-testimonios{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: linear-gradient(180deg, #e8f7fb 0%, #eefcff 100%);
  padding: 56px 0 72px;
}
.nk-wrap{ max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.nk-title{
  font-family: Fredoka, Inter, sans-serif;
  font-weight: 700;
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
  color: var(--nk-ink);
  margin: 0 0 18px;
}

.nk-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.nk-quote-card{
  position: relative;
  background: var(--nk-card);
  border: 1px solid var(--nk-border);
  border-radius: var(--nk-radius);
  padding: 20px 20px 18px;
  box-shadow: var(--nk-shadow);
  min-height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.nk-quote-mark{
  position: absolute;
  top: 8px; left: 16px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 46px;
  line-height: 1;
  color: color-mix(in srgb, var(--nk-primary) 40%, #ffffff);
  pointer-events: none;
}

.nk-quote-card p{
  margin: 26px 0 12px;
  color: var(--nk-ink);
  font-size: 1.02rem;
  flex-grow: 1;
}
.nk-quote-card p strong{ color: var(--nk-primary); }

.nk-author{
  display: flex; align-items: center; gap: 0.75rem;
  margin-top: 1rem;
}
.nk-avatar{
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid color-mix(in srgb, var(--nk-primary) 35%, #fff);
}
.nk-author-role{
  font-weight: 700; color: var(--nk-accent);
  line-height: 1.1;
}
.nk-author-meta{
  color: var(--nk-muted); font-size: .95rem;
}

/* Ocultar el triangulito por defecto */
details summary {
  list-style: none;
  cursor: pointer;
}
details summary::-webkit-details-marker {
  display: none;
}
details summary::marker {
  content: "";
}
details summary::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  border-radius: 50%;
  background-color: #ff7f50;
  vertical-align: middle;
}

/* Footer completo Nubikids */
.site-footer {
  background-color: #ffffff;
  color: #152238;
  padding: 2rem 1rem;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.footer-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  max-width: 1100px;
  margin: 0 auto;
  align-items: flex-start;
}

.footer-left {
  display: flex;
  flex-direction: column;   /* apila logo + redes verticalmente */
  align-items: center;      /* centra todo horizontalmente */
  text-align: center;       /* centra texto si hubiera */
}

.footer-brand img {
  width: 200px;
  height: auto;
  display: block;
  margin-bottom: 1rem;
}

.social-links {
  display: flex;
  gap: 1rem;
  margin-top: 0.5rem;
}

.social-links a {
  font-size: 2rem;
  justify-content: center;
  color: #ff7a00; /* naranja Nubikids */
  transition: color 0.3s ease;
}

.social-links a:hover {
  color: #ff7a00;
}

/* Columnas de links */
.footer-col h4 {
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-col ul li {
  margin-bottom: 0.5rem;
}

.footer-col ul li a {
  color: #152238;
  text-decoration: none;
  transition: color 0.3s;
}

.footer-col ul li a:hover {
  color: #ff7a00;
}

/* Footer final */
.footer-bottom {
  text-align: center;
  margin-top: 2rem;
  font-size: 0.9rem;
  color: #667085;
}

/* Responsive */
@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr}
  .main-nav{display:none}
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .nav-actions .btn-ghost{display:none}
  .nk-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .footer-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer-left, .footer-col {
    align-items: center;
  }

  .social-links {
    justify-content: center;
  }
}