/* ============================================
   TOKENS / VARIABLES GLOBALES
   ============================================ */
:root{
      /* Paleta */
      --bg:        #0D1117;   /* fondo principal, azul-negro profundo */
      --bg-soft:   #11161F;   /* fondo secciones alternas */
      --surface:   #171D29;   /* tarjetas */
      --surface-2: #1F2734;   /* tarjetas hover / bordes */
      --line:      #2A3344;   /* líneas divisorias */
      --text:      #EAEDF3;   /* texto principal */
      --text-dim:  #8A93A6;   /* texto secundario */
      --accent:    #5B8CFF;   /* azul "pulso" — primario */
      --accent-2:  #FF6A4D;   /* coral — energía / CTA */
      --accent-soft: rgba(91,140,255,.12);

      /* Tipografía */
      --font-display: 'Space Grotesk', sans-serif;
      --font-body: 'Inter', sans-serif;

      /* Layout */
      --container: 1180px;
      --radius-sm: 10px;
      --radius-md: 16px;
      --radius-lg: 28px;

      /* Transiciones */
      --ease: cubic-bezier(.4,0,.2,1);
    }

    /* ============================================
       2. RESET BÁSICO
       ============================================ */
    *{ margin:0; padding:0; box-sizing:border-box; }
    html{ scroll-behavior:smooth; }
    body{
      font-family: var(--font-body);
      background: var(--bg);
      color: var(--text);
      line-height:1.6;
      -webkit-font-smoothing:antialiased;
      overflow-x:hidden;
    }
    img{ max-width:100%; display:block; }
    a{ color:inherit; text-decoration:none; }
    ul{ list-style:none; }
    button{ font-family:inherit; cursor:pointer; border:none; }

    /* Foco visible para accesibilidad */
    a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
      outline: 2px solid var(--accent);
      outline-offset: 3px;
    }

    /* Respeta preferencia de movimiento reducido */
    @media (prefers-reduced-motion: reduce){
      *{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
    }

    .container{
      max-width: var(--container);
      margin: 0 auto;
      padding: 0 24px;
    }

    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:8px;
      font-family: var(--font-display);
      font-size: 13px;
      font-weight:600;
      letter-spacing:.18em;
      text-transform:uppercase;
      color: var(--accent);
      margin-bottom: 16px;
    }
    .eyebrow::before{
      content:'';
      width: 22px; height: 1px;
      background: var(--accent);
      display:inline-block;
    }

    h1,h2,h3,h4{
      font-family: var(--font-display);
      font-weight: 600;
      letter-spacing:-0.02em;
      line-height:1.1;
    }

    .section-head{
      max-width: 620px;
      margin-bottom: 56px;
    }
    .section-head h2{
      font-size: clamp(2rem, 4vw, 2.8rem);
      margin-bottom: 14px;
    }
    .section-head p{
      color: var(--text-dim);
      font-size: 1.05rem;
    }

    /* Botones */
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      padding: 15px 30px;
      border-radius: 999px;
      font-family: var(--font-display);
      font-weight:600;
      font-size: .95rem;
      letter-spacing:.01em;
      transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
      white-space:nowrap;
    }
    .btn-primary{
      background: var(--accent);
      color: #08101F;
      box-shadow: 0 8px 24px -8px rgba(91,140,255,.65);
    }
    .btn-primary:hover{
      transform: translateY(-3px);
      box-shadow: 0 14px 32px -10px rgba(91,140,255,.8);
    }
    .btn-ghost{
      background: transparent;
      color: var(--text);
      border: 1px solid var(--line);
    }
    .btn-ghost:hover{
      border-color: var(--accent);
      color: var(--accent);
      transform: translateY(-3px);
    }
    .btn-sm{ padding: 10px 22px; font-size:.85rem; }

    /* ============================================
       3. NAVBAR
       ============================================ */
    .navbar{
      position: fixed;
      top:0; left:0; right:0;
      z-index: 1000;
      padding: 22px 0;
      transition: padding .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease), backdrop-filter .35s var(--ease);
      border-bottom: 1px solid transparent;
    }
    .navbar.scrolled{
      padding: 14px 0;
      background: rgba(13,17,23,.78);
      backdrop-filter: blur(14px) saturate(140%);
      border-bottom: 1px solid var(--line);
    }
    .nav-inner{
      display:flex;
      align-items:center;
      justify-content:space-between;
    }
    .logo{
      font-family: var(--font-display);
      font-size: 1.35rem;
      font-weight: 700;
      display:flex;
      align-items:center;
      gap:8px;
      letter-spacing:-0.02em;
    }
    .logo-img{
      height: 36px;
      width: auto;
      display:block;
    }
    .footer-brand .logo-img{ height: 32px; }
    .logo span{ color: var(--accent); }
    .logo .dot{
      width:8px; height:8px;
      border-radius:50%;
      background: var(--accent-2);
      display:inline-block;
      animation: blink 2.4s ease-in-out infinite;
    }
    @keyframes blink{
      0%,100%{ opacity:1; transform:scale(1); }
      50%{ opacity:.35; transform:scale(.7); }
    }

    .nav-links{
      display:flex;
      align-items:center;
      gap:38px;
    }
    .nav-links a{
      font-size:.92rem;
      font-weight:500;
      color: var(--text-dim);
      position:relative;
      padding: 4px 0;
      transition: color .25s var(--ease);
    }
    .nav-links a::after{
      content:'';
      position:absolute;
      left:0; bottom:-2px;
      width:0%; height:2px;
      background: var(--accent);
      transition: width .3s var(--ease);
    }
    .nav-links a:hover{ color: var(--text); }
    .nav-links a:hover::after{ width:100%; }

    .nav-cta{ display:flex; align-items:center; gap:18px; }

    /* Botón hamburguesa (mobile) */
    .nav-toggle{
      display:none;
      flex-direction:column;
      gap:5px;
      background:none;
      padding:8px;
      z-index:1100;
    }
    .nav-toggle span{
      width:24px; height:2px;
      background: var(--text);
      transition: transform .3s var(--ease), opacity .3s var(--ease);
    }
    .nav-toggle.active span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
    .nav-toggle.active span:nth-child(2){ opacity:0; }
    .nav-toggle.active span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

    /* ============================================
       4. HERO
       ============================================ */
    .hero{
      position:relative;
      min-height: 100vh;
      display:flex;
      align-items:center;
      padding-top: 110px;
      overflow:hidden;
    }
    /* Canvas de red de "pulsos" — elemento distintivo de fondo */
    #pulseCanvas{
      position:absolute;
      inset:0;
      width:100%; height:100%;
      z-index:0;
      opacity:.55;
    }
    .hero::after{
      /* Degradado para fundir el canvas con el fondo */
      content:'';
      position:absolute; inset:0;
      background: radial-gradient(ellipse 70% 60% at 75% 30%, rgba(91,140,255,.18), transparent 60%),
                  linear-gradient(180deg, transparent 0%, var(--bg) 92%);
      z-index:1;
      pointer-events:none;
    }
    .hero-inner{
      position:relative;
      z-index:2;
      display:grid;
      grid-template-columns: 1.15fr .85fr;
      gap: 60px;
      align-items:center;
    }
    .hero-content h1{
      font-size: clamp(2.6rem, 6vw, 4.6rem);
      margin-bottom: 24px;
    }
    .hero-content h1 .highlight{
      color: var(--accent);
      position:relative;
    }
    .hero-content p{
      color: var(--text-dim);
      font-size: 1.12rem;
      max-width: 480px;
      margin-bottom: 36px;
    }
    .hero-actions{
      display:flex;
      gap:16px;
      flex-wrap:wrap;
      margin-bottom: 56px;
    }
    .hero-stats{
      display:flex;
      gap: 40px;
      flex-wrap:wrap;
    }
    .hero-stats .stat-num{
      font-family: var(--font-display);
      font-size: 2rem;
      font-weight:700;
      color: var(--text);
    }
    .hero-stats .stat-num span{ color: var(--accent); }
    .hero-stats .stat-label{
      font-size:.82rem;
      color: var(--text-dim);
      letter-spacing:.04em;
      margin-top:2px;
    }

    /* Tarjeta "dashboard" flotante — elemento de impacto visual */
    .hero-visual{
      position:relative;
      display:flex;
      justify-content:center;
    }
    .dash-card{
      width: 100%;
      max-width: 380px;
      background: linear-gradient(160deg, var(--surface) 0%, var(--bg-soft) 100%);
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      padding: 28px;
      box-shadow: 0 30px 60px -25px rgba(0,0,0,.6);
      animation: floatY 6s ease-in-out infinite;
    }
    @keyframes floatY{
      0%,100%{ transform: translateY(0); }
      50%{ transform: translateY(-14px); }
    }
    .dash-card .dash-row{
      display:flex;
      justify-content:space-between;
      align-items:center;
      margin-bottom: 18px;
    }
    .dash-card .dash-title{
      font-family: var(--font-display);
      font-weight:600;
      font-size: 1rem;
    }
    .dash-card .dash-badge{
      font-size:.72rem;
      font-weight:600;
      padding: 4px 10px;
      border-radius: 999px;
      background: rgba(50,200,140,.12);
      color: #4ADE80;
      letter-spacing:.04em;
    }
    .dash-chart{
      display:flex;
      align-items:flex-end;
      gap:8px;
      height: 110px;
      margin: 22px 0 26px;
    }
    .dash-chart .bar{
      flex:1;
      background: linear-gradient(180deg, var(--accent), rgba(91,140,255,.15));
      border-radius: 6px 6px 2px 2px;
      transform: scaleY(0);
      transform-origin:bottom;
    }
    .dash-card .dash-foot{
      display:flex;
      justify-content:space-between;
      padding-top: 18px;
      border-top: 1px solid var(--line);
    }
    .dash-card .dash-foot .lbl{ font-size:.78rem; color: var(--text-dim); }
    .dash-card .dash-foot .val{ font-family:var(--font-display); font-weight:700; }
    .dash-card .dash-foot .val.up{ color:#4ADE80; }

    .scroll-cue{
      position:absolute;
      bottom: 36px;
      left: 50%;
      transform: translateX(-50%);
      z-index:2;
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:8px;
      color: var(--text-dim);
      font-size:.75rem;
      letter-spacing:.18em;
      text-transform:uppercase;
    }
    .scroll-cue .line{
      width:1px; height:34px;
      background: linear-gradient(180deg, var(--accent), transparent);
      animation: scrollLine 2s ease-in-out infinite;
    }
    @keyframes scrollLine{
      0%{ transform: scaleY(0); transform-origin:top; }
      50%{ transform: scaleY(1); transform-origin:top; }
      51%{ transform: scaleY(1); transform-origin:bottom; }
      100%{ transform: scaleY(0); transform-origin:bottom; }
    }

    /* ============================================
       5. SECCIONES — GENERAL
       ============================================ */
    section{ padding: 120px 0; position:relative; }
    .alt-bg{ background: var(--bg-soft); }

    /* ============================================
       6. SERVICIOS (tarjetas con hover)
       ============================================ */
    .services-grid{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }
    .service-card{
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      padding: 34px;
      transition: transform .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease);
      position:relative;
      overflow:hidden;
    }
    .service-card::before{
      content:'';
      position:absolute;
      top:-60%; right:-60%;
      width: 220px; height:220px;
      background: radial-gradient(circle, var(--accent-soft), transparent 70%);
      opacity:0;
      transition: opacity .5s var(--ease);
    }
    .service-card:hover{
      transform: translateY(-8px);
      border-color: var(--accent);
      background: var(--surface-2);
    }
    .service-card:hover::before{ opacity:1; }
    .service-icon{
      width: 52px; height:52px;
      border-radius: 14px;
      background: var(--accent-soft);
      display:flex; align-items:center; justify-content:center;
      margin-bottom: 24px;
      font-size: 22px;
      color: var(--accent);
      transition: transform .4s var(--ease), background .4s var(--ease);
    }
    .service-card:hover .service-icon{
      transform: scale(1.08) rotate(-6deg);
      background: var(--accent);
      color: var(--bg);
    }
    .service-card h3{
      font-size: 1.25rem;
      margin-bottom: 12px;
    }
    .service-card p{
      color: var(--text-dim);
      font-size: .95rem;
    }
    .service-card .tag-list{
      display:flex; flex-wrap:wrap; gap:8px;
      margin-top: 20px;
    }
    .service-card .tag-list span{
      font-size:.74rem;
      padding: 5px 11px;
      border-radius: 999px;
      border: 1px solid var(--line);
      color: var(--text-dim);
      transition: border-color .3s var(--ease), color .3s var(--ease);
    }
    .service-card:hover .tag-list span{
      border-color: var(--accent);
      color: var(--text);
    }

    /* ============================================
       7. PROCESO (pasos numerados — secuencia real)
       ============================================ */
    .process-list{
      display:flex;
      flex-direction:column;
    }
    .process-step{
      display:grid;
      grid-template-columns: 110px 1fr 1fr;
      gap: 40px;
      align-items:start;
      padding: 36px 0;
      border-top: 1px solid var(--line);
      transition: background .3s var(--ease);
    }
    .process-step:last-child{ border-bottom: 1px solid var(--line); }
    .process-step:hover{ background: rgba(91,140,255,.04); }
    .process-num{
      font-family: var(--font-display);
      font-size: 2.6rem;
      font-weight:700;
      color: var(--accent);
      opacity:.85;
      line-height:1;
    }
    .process-step h3{ font-size:1.3rem; margin-bottom:8px; }
    .process-step p{ color: var(--text-dim); font-size:.96rem; }

    /* ============================================
       8. PORTAFOLIO
       ============================================ */
    .work-grid{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }
    .work-card{
      position:relative;
      border-radius: var(--radius-md);
      overflow:hidden;
      aspect-ratio: 4/3.4;
      border: 1px solid var(--line);
      background: var(--surface);
      cursor:pointer;
    }
    .work-card .work-bg{
      position:absolute; inset:0;
      transition: transform .6s var(--ease);
    }
    .work-card:nth-child(1) .work-bg{ background: linear-gradient(135deg, #2A4ED9, #5B8CFF); }
    .work-card:nth-child(2) .work-bg{ background: linear-gradient(135deg, #FF6A4D, #FFA36C); }
    .work-card:nth-child(3) .work-bg{ background: linear-gradient(135deg, #1B2333, #3A4A6B); }
    .work-card:hover .work-bg{ transform: scale(1.1); }
    .work-card .work-info{
      position:absolute; left:0; right:0; bottom:0;
      padding: 26px;
      background: linear-gradient(180deg, transparent, rgba(8,10,15,.92) 75%);
      transform: translateY(12px);
      opacity:.92;
      transition: transform .4s var(--ease);
    }
    .work-card:hover .work-info{ transform: translateY(0); }
    .work-info .work-cat{
      font-size:.75rem;
      letter-spacing:.14em;
      text-transform:uppercase;
      color: rgba(255,255,255,.75);
      margin-bottom: 6px;
      display:block;
    }
    .work-info h3{ font-size:1.25rem; color:#fff; }
    .work-card .work-arrow{
      position:absolute;
      top: 22px; right:22px;
      width: 42px; height:42px;
      border-radius:50%;
      background: rgba(255,255,255,.14);
      backdrop-filter: blur(6px);
      display:flex; align-items:center; justify-content:center;
      color:#fff;
      font-size:1.1rem;
      transform: translateY(-8px) scale(.9);
      opacity:0;
      transition: all .4s var(--ease);
    }
    .work-card:hover .work-arrow{ transform: translateY(0) scale(1); opacity:1; }

    /* ============================================
       9. TESTIMONIOS
       ============================================ */
    .testi-grid{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }
    .testi-card{
      background: var(--surface);
      border:1px solid var(--line);
      border-radius: var(--radius-md);
      padding: 30px;
      transition: transform .4s var(--ease), border-color .4s var(--ease);
    }
    .testi-card:hover{ transform: translateY(-6px); border-color: var(--accent); }
    .testi-stars{ color: var(--accent-2); margin-bottom: 16px; font-size:.95rem; letter-spacing:2px; }
    .testi-card p{ color: var(--text-dim); font-size:.95rem; margin-bottom: 22px; }
    .testi-author{ display:flex; align-items:center; gap:12px; }
    .testi-avatar{
      width:42px; height:42px;
      border-radius:50%;
      background: linear-gradient(135deg, var(--accent), var(--accent-2));
      flex-shrink:0;
    }
    .testi-author strong{ font-size:.92rem; display:block; }
    .testi-author span{ font-size:.8rem; color: var(--text-dim); }

    /* ============================================
       10. CONTACTO / FORMULARIO
       ============================================ */
    .contact-wrap{
      display:grid;
      grid-template-columns: .9fr 1.1fr;
      gap: 60px;
      background: var(--surface);
      border:1px solid var(--line);
      border-radius: var(--radius-lg);
      padding: 56px;
    }
    .contact-info h2{ font-size: clamp(1.8rem,3.4vw,2.4rem); margin-bottom:16px; }
    .contact-info p{ color: var(--text-dim); margin-bottom: 32px; }
    .contact-detail{
      display:flex; align-items:center; gap:14px;
      margin-bottom: 18px;
      font-size:.95rem;
    }
    .contact-detail .ico{
      width:38px; height:38px;
      border-radius:10px;
      background: var(--accent-soft);
      color: var(--accent);
      display:flex; align-items:center; justify-content:center;
      flex-shrink:0;
    }

    .form-group{ margin-bottom: 20px; position:relative; }
    .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
    label{
      display:block;
      font-size:.82rem;
      font-weight:600;
      margin-bottom: 8px;
      color: var(--text-dim);
      letter-spacing:.02em;
    }
    input, textarea, select{
      width:100%;
      padding: 14px 16px;
      background: var(--bg-soft);
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      color: var(--text);
      font-family: var(--font-body);
      font-size:.95rem;
      transition: border-color .25s var(--ease), background .25s var(--ease);
    }
    textarea{ resize: vertical; min-height: 110px; }
    input::placeholder, textarea::placeholder{ color:#4B5567; }
    input:focus, textarea:focus, select:focus{
      border-color: var(--accent);
      background: rgba(91,140,255,.05);
    }
    /* Estado de error en validación */
    .form-group.error input,
    .form-group.error textarea,
    .form-group.error select{
      border-color: var(--accent-2);
    }
    .error-msg{
      display:none;
      color: var(--accent-2);
      font-size:.78rem;
      margin-top: 6px;
    }
    .form-group.error .error-msg{ display:block; }

    .form-submit{
      width:100%;
      margin-top: 6px;
    }
    /* Mensaje de éxito al enviar */
    .form-success{
      display:none;
      align-items:center;
      gap:10px;
      margin-top: 16px;
      padding: 14px 18px;
      border-radius: var(--radius-sm);
      background: rgba(74,222,128,.1);
      color: #4ADE80;
      font-size:.9rem;
      font-weight:500;
    }
    .form-success.show{ display:flex; }
    .form-success.form-error{
      background: rgba(255,106,77,.12);
      color: var(--accent-2);
    }
    .btn.is-loading{
      cursor: progress;
      opacity:.85;
    }
    .btn.is-loading::after{
      content:'';
      width:16px; height:16px;
      border-radius:50%;
      border:2px solid rgba(8,16,31,.35);
      border-top-color:#08101F;
      animation: btn-spin .7s linear infinite;
    }
    @keyframes btn-spin{ to{ transform: rotate(360deg); } }

    /* ============================================
       11. CTA FINAL
       ============================================ */
    .cta-final{
      text-align:center;
      padding: 100px 0;
      position:relative;
    }
    .cta-final h2{
      font-size: clamp(2.2rem, 5vw, 3.6rem);
      margin-bottom: 22px;
    }
    .cta-final p{
      color: var(--text-dim);
      max-width: 520px;
      margin: 0 auto 36px;
    }

    /* ============================================
       12. FOOTER
       ============================================ */
    footer{
      border-top: 1px solid var(--line);
      padding: 64px 0 28px;
    }
    .footer-grid{
      display:grid;
      grid-template-columns: 1.4fr 1fr 1fr 1fr;
      gap: 40px;
      margin-bottom: 48px;
    }
    .footer-brand p{
      color: var(--text-dim);
      font-size:.92rem;
      margin: 16px 0 22px;
      max-width: 280px;
    }
    .social-links{ display:flex; gap:10px; }
    .social-links a{
      width:38px; height:38px;
      border-radius:50%;
      border:1px solid var(--line);
      display:flex; align-items:center; justify-content:center;
      font-size:.85rem;
      transition: all .3s var(--ease);
    }
    .social-links a:hover{
      background: var(--accent);
      border-color: var(--accent);
      color: var(--bg);
      transform: translateY(-3px);
    }
    .footer-col h4{
      font-size:.95rem;
      margin-bottom: 18px;
      font-weight:600;
    }
    .footer-col ul li{ margin-bottom: 12px; }
    .footer-col ul li a{
      color: var(--text-dim);
      font-size:.9rem;
      transition: color .25s var(--ease), padding-left .25s var(--ease);
    }
    .footer-col ul li a:hover{ color: var(--accent); padding-left:4px; }
    .footer-bottom{
      display:flex;
      justify-content:space-between;
      align-items:center;
      flex-wrap:wrap;
      gap:12px;
      padding-top: 28px;
      border-top: 1px solid var(--line);
      font-size:.82rem;
      color: var(--text-dim);
    }
    .footer-bottom a:hover{ color: var(--accent); }

    /* ============================================
       13. ANIMACIONES DE ENTRADA (scroll reveal)
       ============================================ */
    [data-reveal]{
      opacity:0;
      transform: translateY(36px);
    }
    [data-reveal].is-visible{
      opacity:1;
      transform: translateY(0);
      transition: opacity .8s var(--ease), transform .8s var(--ease);
    }

    /* ============================================
       14. RESPONSIVE
       ============================================ */
    @media (max-width: 1024px){
      .hero-inner{ grid-template-columns: 1fr; text-align:left; }
      .hero-visual{ order:-1; }
      .dash-card{ max-width: 440px; }
      .services-grid, .work-grid, .testi-grid{ grid-template-columns: repeat(2,1fr); }
      .contact-wrap{ grid-template-columns: 1fr; padding: 40px; }
      .footer-grid{ grid-template-columns: 1fr 1fr; gap:32px; }
    }

    @media (max-width: 760px){
      section{ padding: 80px 0; }
      .nav-links, .nav-cta .btn-ghost{ display:none; }
      .nav-toggle{ display:flex; }

      /* Menú móvil desplegable */
      .nav-links.mobile-open{
        display:flex;
        flex-direction:column;
        position:absolute;
        top: 100%;
        left:0; right:0;
        background: rgba(13,17,23,.97);
        backdrop-filter: blur(14px);
        padding: 24px;
        gap: 20px;
        border-bottom: 1px solid var(--line);
        animation: slideDown .35s var(--ease);
      }
      @keyframes slideDown{
        from{ opacity:0; transform: translateY(-10px); }
        to{ opacity:1; transform: translateY(0); }
      }

      .hero{ padding-top: 100px; min-height: auto; padding-bottom: 80px; }
      .hero-content h1{ font-size: 2.5rem; }
      .hero-actions{ flex-direction:column; align-items:stretch; }
      .hero-stats{ gap: 28px; }

      .services-grid, .work-grid, .testi-grid{ grid-template-columns: 1fr; }
      .process-step{ grid-template-columns: 1fr; gap: 10px; }
      .process-num{ font-size: 1.8rem; }

      .form-row{ grid-template-columns: 1fr; }
      .footer-grid{ grid-template-columns: 1fr; gap:36px; }
      .footer-bottom{ flex-direction:column; text-align:center; }
    }