/* ======================================================================
   SOLTO TECH — Sistema de diseño compartido
   Estilo: flat / sticker / neobrutalista · paleta 100% azul
   ====================================================================== */

:root{
  --ink:#0a1f4a;
  --navy:#15296b;
  --blue-700:#1d4ed8;
  --blue:#2c6bff;
  --blue-600:#3d7bff;
  --sky:#4fa3ff;
  --cyan:#3ec9ff;
  --cyan-200:#9fe0ff;
  --ice:#b6d4ff;
  --mist:#e3edff;
  --paper:#e9f1ff;
  --paper-2:#dbe8ff;
  --white:#ffffff;
  --shadow:6px 6px 0 var(--ink);
  --shadow-sm:4px 4px 0 var(--ink);
  --shadow-lg:10px 10px 0 var(--ink);
  --bd:2.5px solid var(--ink);
  --bd-thick:3px solid var(--ink);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Space Grotesk',sans-serif;
  background:var(--paper);color:var(--ink);
  overflow-x:hidden;line-height:1.55;-webkit-font-smoothing:antialiased;position:relative;
}
body::before{
  content:'';position:fixed;inset:0;z-index:-2;
  background-image:radial-gradient(var(--ice) 1.5px, transparent 1.5px);
  background-size:26px 26px;opacity:.55;
}
::selection{background:var(--cyan);color:var(--ink)}
h1,h2,h3,h4{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;letter-spacing:-.02em;line-height:1}
a{color:var(--blue-700)}

/* ---------- primitivas sticker ---------- */
.hl{display:inline-block;background:var(--blue);color:var(--white);border:var(--bd);border-radius:14px;padding:.02em .28em;box-shadow:var(--shadow-sm);transform:rotate(-2deg);line-height:1.05}
.hl.cyan{background:var(--cyan);color:var(--ink)}
.hl.rot{transform:rotate(2deg)}
.sparkle{position:absolute;pointer-events:none;z-index:1;animation:float 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-16px) rotate(12deg)}}
@keyframes floatRev{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(14px) rotate(-10deg)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes wobble{0%,100%{transform:rotate(-1.5deg)}50%{transform:rotate(1.5deg)}}

/* ---------- marca / logo ---------- */
.brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none;flex-shrink:0}
.brand-mark{height:46px;width:auto;display:block;overflow:visible}
.brand-name{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:30px;letter-spacing:-.03em;line-height:1;color:var(--ink);white-space:nowrap}
.brand-name .t{color:var(--blue)}

/* ---------- nav ---------- */
nav{
  position:sticky;top:0;z-index:100;background:var(--white);border-bottom:var(--bd-thick);
  padding:14px 40px;display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center;
}
.nav-links{display:flex;gap:8px;list-style:none;justify-content:center;flex-wrap:wrap}
.nav-links a{color:var(--ink);text-decoration:none;font-weight:600;font-size:14px;padding:8px 14px;border-radius:100px;border:2px solid transparent;white-space:nowrap;transition:all .15s}
.nav-links a:hover{border-color:var(--ink);background:var(--mist)}
.nav-links a.active{border-color:var(--ink);background:var(--cyan)}
.nav-cta{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;padding:11px 22px;background:var(--blue);color:var(--white);border:var(--bd);border-radius:100px;box-shadow:var(--shadow-sm);cursor:pointer;font-size:15px;white-space:nowrap;flex-shrink:0;transition:transform .12s, box-shadow .12s}
.nav-cta:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.nav-cta:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--ink)}

/* ---------- botones ---------- */
.btn{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:17px;padding:16px 30px;border:var(--bd-thick);border-radius:100px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:10px;box-shadow:var(--shadow);transition:transform .12s, box-shadow .12s}
.btn:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--ink)}
.btn:active{transform:translate(6px,6px);box-shadow:0 0 0 var(--ink)}
.btn-primary{background:var(--blue);color:var(--white)}
.btn-cyan{background:var(--cyan);color:var(--ink)}
.btn-white{background:var(--white);color:var(--ink)}
.btn svg{transition:transform .2s}
.btn:hover svg{transform:translateX(4px)}

/* ---------- secciones ---------- */
section{padding:90px 40px;max-width:1320px;margin:0 auto;position:relative}
.sec-tag{display:inline-block;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.12em;background:var(--cyan);color:var(--ink);padding:7px 16px;border:var(--bd);border-radius:100px;box-shadow:var(--shadow-sm);margin-bottom:22px;transform:rotate(-1.5deg)}
.sec-title{font-size:clamp(34px,4.6vw,60px);color:var(--ink);margin-bottom:20px;max-width:920px;line-height:1.02}
.sec-title em{font-style:normal}
.sec-lead{font-size:18px;color:var(--navy);max-width:640px;margin-bottom:64px;font-weight:500}

/* ---------- hero (home) ---------- */
.hero{position:relative;padding:80px 40px 90px;max-width:1320px;margin:0 auto;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero-eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.08em;background:var(--white);color:var(--ink);padding:9px 18px;border:var(--bd);border-radius:100px;box-shadow:var(--shadow-sm);margin-bottom:28px;animation:wobble 5s ease-in-out infinite}
.hero h1{font-size:clamp(46px,6.4vw,88px);color:var(--ink);margin-bottom:30px}
.hero h1 .l2{display:inline-block;margin:14px 0}
.hero-lead{font-size:19px;color:var(--navy);max-width:520px;margin-bottom:36px;line-height:1.6;font-weight:500}
.hero-actions{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.hero-visual{position:relative;width:100%;aspect-ratio:1;animation:floaty 8s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.hero-visual svg{width:100%;height:100%;overflow:visible}

/* ---------- page hero (subpáginas) ---------- */
.page-hero{position:relative;padding:54px 40px 30px;max-width:1320px;margin:0 auto}
.crumbs{display:flex;gap:8px;align-items:center;font-size:13px;font-weight:600;color:var(--navy);margin-bottom:22px;flex-wrap:wrap}
.crumbs a{color:var(--blue-700);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs span{color:var(--sky)}
.page-hero h1{font-size:clamp(40px,5.4vw,68px);color:var(--ink);margin-bottom:18px;max-width:18ch;line-height:1.02}
.page-hero p{font-size:19px;color:var(--navy);max-width:620px;font-weight:500}

/* ---------- bloque "en resumen" (GEO/AEO) ---------- */
.tldr{background:var(--white);border:var(--bd-thick);border-radius:22px;box-shadow:var(--shadow);padding:26px 30px;max-width:760px;margin:34px 0 0}
.tldr h2{font-size:16px;text-transform:uppercase;letter-spacing:.1em;color:var(--blue);margin-bottom:16px;display:flex;align-items:center;gap:10px}
.tldr h2::before{content:'✦';color:var(--cyan)}
.tldr ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.tldr li{display:flex;gap:12px;font-size:15.5px;color:var(--navy);font-weight:500;line-height:1.5}
.tldr li::before{content:'';width:13px;height:13px;border-radius:50%;background:var(--cyan);border:2px solid var(--ink);flex-shrink:0;margin-top:5px}

/* ---------- marquee ---------- */
.marquee-band{background:var(--ink);border-top:var(--bd-thick);border-bottom:var(--bd-thick);padding:18px 0;overflow:hidden;transform:rotate(-1deg);margin:30px 0;width:101%;margin-left:-0.5%}
.marquee-band.blue{background:var(--blue)}
.marquee-band.alt{transform:rotate(1deg)}
.marquee{display:flex;gap:0;width:max-content;animation:scroll 28s linear infinite}
.marquee.rev{animation:scrollRev 28s linear infinite}
@keyframes scroll{to{transform:translateX(-50%)}}
@keyframes scrollRev{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.marquee span{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:30px;color:var(--white);padding:0 26px;display:flex;align-items:center;gap:26px;white-space:nowrap;text-transform:uppercase;letter-spacing:.02em}
.marquee span::after{content:'✦';color:var(--cyan);font-size:24px}

/* ---------- pasos (método) ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.step{background:var(--white);border:var(--bd-thick);border-radius:22px;box-shadow:var(--shadow);padding:30px 24px 28px;position:relative;transition:transform .15s, box-shadow .15s}
.step:nth-child(odd){transform:rotate(-1deg)}
.step:nth-child(even){transform:rotate(1deg)}
.step:hover{transform:translate(-4px,-4px) rotate(0deg);box-shadow:var(--shadow-lg)}
.step-num{position:absolute;top:-22px;left:22px;width:52px;height:52px;border-radius:50%;background:var(--blue);color:var(--white);border:var(--bd-thick);box-shadow:var(--shadow-sm);display:grid;place-items:center;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:22px}
.step:nth-child(2) .step-num{background:var(--cyan);color:var(--ink)}
.step:nth-child(3) .step-num{background:var(--sky);color:var(--ink)}
.step:nth-child(4) .step-num{background:var(--navy);color:var(--white)}
.step-icon{width:60px;height:60px;margin:18px 0;border:var(--bd);border-radius:16px;background:var(--mist);display:grid;place-items:center}
.step-kicker{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--blue);margin-bottom:8px}
.step h3{font-size:22px;color:var(--ink);margin-bottom:10px;line-height:1.08}
.step p{font-size:14.5px;color:var(--navy);line-height:1.55;font-weight:500}

/* ---------- datos / split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.points{list-style:none;display:flex;flex-direction:column;gap:18px;margin-top:36px}
.points li{background:var(--white);border:var(--bd-thick);border-radius:18px;box-shadow:var(--shadow-sm);padding:20px 24px;transition:transform .15s, box-shadow .15s}
.points li:hover{transform:translate(-3px,-3px);box-shadow:var(--shadow)}
.points h4{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:18px;color:var(--ink);margin-bottom:6px;display:flex;align-items:center;gap:10px}
.points h4 .dot{width:14px;height:14px;border-radius:50%;background:var(--cyan);border:2px solid var(--ink);flex-shrink:0}
.points p{font-size:14.5px;color:var(--navy);font-weight:500}
.visual-box{position:relative;aspect-ratio:1;background:var(--white);border:var(--bd-thick);border-radius:28px;box-shadow:var(--shadow-lg);overflow:hidden;padding:8px}
.visual-box svg{width:100%;height:100%}

/* ---------- tarjetas grandes (servicios / escala) ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.cards.two{grid-template-columns:repeat(2,1fr)}
.card-x{border:var(--bd-thick);border-radius:24px;box-shadow:var(--shadow);padding:34px 28px;position:relative;overflow:hidden;transition:transform .15s, box-shadow .15s;background:var(--white)}
.card-x:hover{transform:translate(-4px,-4px);box-shadow:var(--shadow-lg)}
.card-x.fill-mist{background:var(--mist)}
.card-x.fill-cyan{background:var(--cyan-200)}
.card-x.fill-ice{background:var(--ice)}
.card-icon{width:66px;height:66px;margin-bottom:22px;background:var(--white);border:var(--bd-thick);border-radius:18px;box-shadow:var(--shadow-sm);display:grid;place-items:center}
.card-x h3{font-size:25px;color:var(--ink);margin-bottom:10px;line-height:1.05}
.card-x p{font-size:15px;color:var(--navy);font-weight:500;line-height:1.55}
.card-x ul{list-style:none;margin-top:14px;display:flex;flex-direction:column;gap:8px}
.card-x ul li{font-size:14px;color:var(--navy);font-weight:500;display:flex;gap:9px;align-items:flex-start}
.card-x ul li::before{content:'✓';color:var(--blue);font-weight:800;flex-shrink:0}
.card-tag{position:absolute;top:18px;right:18px;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:13px;background:var(--ink);color:var(--white);padding:5px 12px;border-radius:100px;transform:rotate(6deg)}

/* ---------- prosa / contenido ---------- */
.prose{max-width:760px}
.prose h2{font-size:clamp(26px,3.2vw,38px);color:var(--ink);margin:48px 0 14px;line-height:1.08}
.prose h3{font-size:21px;color:var(--ink);margin:30px 0 10px}
.prose p{font-size:16.5px;color:var(--navy);font-weight:500;line-height:1.65;margin-bottom:16px}
.prose ul,.prose ol{margin:0 0 18px 0;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.prose ul li{font-size:16px;color:var(--navy);font-weight:500;line-height:1.55;display:flex;gap:11px;align-items:flex-start}
.prose ul li::before{content:'';width:12px;height:12px;border-radius:50%;background:var(--cyan);border:2px solid var(--ink);flex-shrink:0;margin-top:6px}
.prose ol{counter-reset:i}
.prose ol li{counter-increment:i;font-size:16px;color:var(--navy);font-weight:500;display:flex;gap:12px;align-items:flex-start}
.prose ol li::before{content:counter(i);background:var(--blue);color:#fff;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:13px;min-width:26px;height:26px;border-radius:50%;border:2px solid var(--ink);display:grid;place-items:center;flex-shrink:0}
.prose strong{color:var(--ink);font-weight:700}
.lead-answer{font-size:18px !important;color:var(--ink) !important;font-weight:600 !important;background:var(--mist);border-left:5px solid var(--blue);border-radius:0 12px 12px 0;padding:14px 20px;margin-bottom:20px}

/* ---------- FAQ (AEO) ---------- */
.faq{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.faq-item{background:var(--white);border:var(--bd-thick);border-radius:18px;box-shadow:var(--shadow-sm);overflow:hidden}
.faq-q{width:100%;text-align:left;background:none;border:none;cursor:pointer;padding:22px 26px;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:18px;color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq-q .ic{flex-shrink:0;width:30px;height:30px;border:var(--bd);border-radius:50%;display:grid;place-items:center;background:var(--cyan);transition:transform .25s}
.faq-item.open .faq-q .ic{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;padding:0 26px}
.faq-item.open .faq-a{max-height:340px;padding-bottom:24px}
.faq-a p{font-size:15.5px;color:var(--navy);font-weight:500;line-height:1.6}

/* ---------- partner / CTA ---------- */
.partner{background:var(--blue);border-top:var(--bd-thick);border-bottom:var(--bd-thick);padding:110px 40px;text-align:center;position:relative;overflow:hidden;max-width:none;margin:0}
.partner-inner{max-width:880px;margin:0 auto;position:relative;z-index:2}
.partner .sec-tag{background:var(--cyan)}
.partner h2{font-size:clamp(38px,5.4vw,72px);color:var(--white);margin-bottom:24px;line-height:1.02}
.partner h2 .hl{background:var(--white);color:var(--blue);border-color:var(--ink)}
.partner h2 .hl.cyan{background:var(--cyan);color:var(--ink)}
.partner p{font-size:19px;color:var(--mist);max-width:580px;margin:0 auto 40px;font-weight:500}
.trust{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:54px}
.trust-chip{display:flex;align-items:center;gap:9px;background:var(--white);color:var(--ink);font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:14px;padding:11px 18px;border:var(--bd);border-radius:100px;box-shadow:var(--shadow-sm)}
.trust-chip svg{color:var(--blue)}

/* ---------- contacto ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:start}
.contact-card{background:var(--white);border:var(--bd-thick);border-radius:24px;box-shadow:var(--shadow);padding:36px}
.contact-info{display:flex;flex-direction:column;gap:20px}
.contact-info .ci{display:flex;gap:14px;align-items:flex-start}
.contact-info .ci .ic{width:48px;height:48px;border:var(--bd);border-radius:14px;background:var(--mist);display:grid;place-items:center;flex-shrink:0;color:var(--blue)}
.contact-info h4{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:16px;color:var(--ink);margin-bottom:2px}
.contact-info a,.contact-info p{font-size:15px;color:var(--navy);font-weight:500;text-decoration:none}
.contact-info a:hover{color:var(--blue);text-decoration:underline}

/* ---------- formulario ---------- */
.fg{margin-bottom:16px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fg label{display:block;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:13px;color:var(--ink);margin-bottom:7px}
.fg input,.fg textarea{width:100%;padding:13px 16px;border:var(--bd);border-radius:14px;font-size:15px;font-family:inherit;color:var(--ink);background:var(--paper);transition:all .15s;outline:none}
.fg textarea{resize:vertical;min-height:110px}
.fg input:focus,.fg textarea:focus{background:var(--white);box-shadow:var(--shadow-sm);border-color:var(--blue)}
.fg input::placeholder,.fg textarea::placeholder{color:#8aa1cc}
.fsubmit{width:100%;padding:16px;margin-top:10px;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:16px;background:var(--blue);color:var(--white);border:var(--bd-thick);border-radius:16px;box-shadow:var(--shadow);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:transform .12s, box-shadow .12s}
.fsubmit:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--ink)}
.fsubmit:active{transform:translate(6px,6px);box-shadow:0 0 0 var(--ink)}
.fnote{font-size:12.5px;color:#8aa1cc;text-align:center;margin-top:14px;font-weight:500}

/* ---------- footer ---------- */
footer{background:var(--ink);color:var(--ice);padding:60px 40px 40px}
.foot-top{max-width:1320px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:2px solid rgba(182,212,255,.2)}
.foot-brand .brand-badge{background:var(--white);border:var(--bd);border-radius:16px;box-shadow:var(--shadow-sm);padding:9px 16px;display:inline-flex}
.foot-brand .brand-mark{height:32px}
.foot-brand .brand-name{font-size:23px}
.foot-brand p{margin-top:18px;font-size:14.5px;color:var(--ice);font-weight:500;max-width:300px;line-height:1.55;opacity:.85}
.foot-col h5{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.1em;color:var(--cyan);margin-bottom:16px}
.foot-col ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.foot-col a{color:var(--ice);text-decoration:none;font-size:14.5px;font-weight:500;opacity:.85;transition:opacity .15s}
.foot-col a:hover{opacity:1;color:var(--cyan)}
.foot-bottom{max-width:1320px;margin:24px auto 0;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:13px;font-weight:500;color:var(--ice);opacity:.8}
.foot-bottom a{color:var(--cyan);text-decoration:none}

/* ---------- modal ---------- */
.overlay{position:fixed;inset:0;background:rgba(10,31,74,.6);backdrop-filter:blur(6px);z-index:1000;display:none;align-items:center;justify-content:center;padding:20px;animation:fadeIn .25s}
.overlay.active{display:flex}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal{background:var(--white);border:var(--bd-thick);border-radius:28px;box-shadow:var(--shadow-lg);max-width:520px;width:100%;padding:42px;position:relative;animation:pop .35s cubic-bezier(.2,1.2,.3,1);max-height:92vh;overflow-y:auto}
@keyframes pop{from{opacity:0;transform:scale(.9) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}
.modal-close{position:absolute;top:18px;right:18px;width:40px;height:40px;border-radius:50%;border:var(--bd);background:var(--mist);cursor:pointer;display:grid;place-items:center;color:var(--ink);transition:transform .12s}
.modal-close:hover{transform:rotate(90deg);background:var(--cyan)}
.modal h3{font-size:30px;color:var(--ink);margin-bottom:8px}
.modal-sub{color:var(--navy);font-size:15px;margin-bottom:26px;font-weight:500}

/* ---------- responsive ---------- */
@media(max-width:1024px){
  nav{grid-template-columns:auto auto;gap:16px}
  .nav-links{grid-column:1/-1;order:3;justify-content:flex-start;padding-top:8px;border-top:2px solid var(--ice)}
  .brand-mark{height:40px}.brand-name{font-size:26px}
  .hero{grid-template-columns:1fr;padding:50px 28px 60px;gap:48px}
  .hero-visual{max-width:440px;margin:0 auto}
  .steps{grid-template-columns:repeat(2,1fr);gap:28px}
  .split,.contact-grid{grid-template-columns:1fr;gap:48px}
  .cards,.cards.two{grid-template-columns:1fr}
  section{padding:64px 28px}
  .page-hero{padding:40px 28px 20px}
  .marquee span{font-size:24px}
  .foot-top{grid-template-columns:1fr 1fr;gap:32px}
  .foot-brand{grid-column:1/-1}
}
@media(max-width:600px){
  nav{padding:12px 18px;grid-template-columns:1fr auto;gap:14px}
  .nav-links{display:none}
  .brand-mark{height:34px}.brand-name{font-size:22px}
  .hero{padding:36px 18px 48px}
  .hero h1{font-size:clamp(38px,11vw,56px)}
  .steps{grid-template-columns:1fr;gap:34px}
  .hero-actions{flex-direction:column;align-items:stretch}
  .btn{justify-content:center}
  section{padding:54px 18px}
  .partner{padding:72px 20px}
  .modal{padding:30px 22px}
  .frow{grid-template-columns:1fr}
  .marquee span{font-size:20px}
  .foot-top{grid-template-columns:1fr}
  .foot-bottom{flex-direction:column;text-align:center}
}