/* CLAVE Soluciones tecnologicas - sitio v1.
   Fuente de verdad: CLAVE_Guia_de_marca.pdf. Paleta, tipografia y logo oficiales; no inventar colores de marca.
   Contraste: Petroleo sobre blanco 15:1, Pizarra 5,8:1, Turquesa 3,7:1 (solo textos grandes/bold >= 14pt),
   Verde Clave nunca como texto sobre blanco; Verde brillo sobre Noche 9:1. */

@font-face { font-family: Sora; src: url(../fuentes/Sora-Light.woff2) format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: Sora; src: url(../fuentes/Sora-Regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: Sora; src: url(../fuentes/Sora-Bold.woff2) format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --noche: #0B1F26;
  --petroleo: #0F2A33;
  --turquesa: #0D9488;
  --turquesa-oscuro: #0B7A70;   /* hover sobre claro; misma familia */
  --verde: #22C55E;
  --brillo: #4ADE80;
  --pizarra: #4E6A72;
  --niebla: #E8F0EF;
  --blanco: #FFFFFF;
  --tinta-clara: #F1F7F6;
  --linea: #D3E0DE;

  --texto: 1.0625rem;           /* 17 px */
  --ancho: 72rem;
  --radio: 14px;
  --radio-chico: 8px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font: 400 var(--texto)/1.6 Sora, Arial, sans-serif; color: var(--petroleo); background: var(--blanco); }
img, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 { font-weight: 700; margin: 0; text-wrap: balance; }
p { margin: 0 0 1em; }
a { color: inherit; text-underline-offset: 0.2em; }
:focus-visible { outline: 3px solid var(--turquesa); outline-offset: 3px; border-radius: 4px; }
.seccion--oscura :focus-visible, .portada :focus-visible, .cabecera :focus-visible, .cierre :focus-visible, .pie :focus-visible { outline-color: var(--brillo); }

.envoltura { width: min(100% - 2.5rem, var(--ancho)); margin-inline: auto; }
.envoltura--angosta { max-width: 48rem; }
.saltar { position: absolute; left: 1rem; top: -4rem; background: var(--blanco); color: var(--petroleo); padding: 0.6rem 1rem; border-radius: var(--radio-chico); z-index: 20; }
.saltar:focus { top: 1rem; }
main:focus { outline: none; }

/* ---------- Botones ---------- */
.boton { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0.75rem 1.4rem;
         border-radius: 999px; font-weight: 700; font-size: 1rem; text-decoration: none; border: 2px solid transparent;
         transition: background-color .2s, color .2s, border-color .2s; }
.boton--verde { background: var(--brillo); color: var(--noche); }          /* Petroleo sobre Verde brillo: 9,8:1 */
.boton--verde:hover { background: var(--verde); }
.boton--borde { border-color: rgba(241, 247, 246, .45); color: var(--tinta-clara); }
.boton--borde:hover { border-color: var(--brillo); color: var(--brillo); }
.boton--claro { background: var(--tinta-clara); color: var(--noche); min-height: 42px; padding: 0.5rem 1.1rem; }
.boton--claro:hover { background: var(--brillo); }
.acciones { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 2rem 0 1.25rem; }

/* ---------- Cabecera (Noche: el logo negativo oficial trae fondo Noche) ---------- */
.cabecera { background: var(--noche); color: var(--tinta-clara); position: sticky; top: 0; z-index: 10; }
/* En el inicio la cabecera es transparente sobre la portada (se ve el patron hasta arriba) y toma el fondo
   Noche al hacer scroll. Solo con JS: sin JS queda solida y pegada arriba, como en el resto del sitio. */
.js .cabecera--sobre-portada { position: fixed; left: 0; right: 0; background: transparent;
                               transition: background-color .25s ease, box-shadow .25s ease; }
.js .cabecera--sobre-portada.con-fondo { background: var(--noche); box-shadow: 0 1px 0 rgba(241, 247, 246, .08); }
.js .cabecera--sobre-portada ~ main .portada { padding-top: 76px; }
@media (prefers-reduced-motion: reduce) { .js .cabecera--sobre-portada { transition: none; } }
.cabecera__fila { display: flex; align-items: center; justify-content: space-between; min-height: 76px; gap: 1rem; }
.cabecera__marca img { width: 160px; }     /* minimo en pantalla: 160 px */
.menu { display: flex; align-items: center; gap: 1.75rem; font-size: 0.95rem; }
.menu a:not(.boton) { text-decoration: none; opacity: .85; padding: 0.5rem 0; }
.menu a:not(.boton):hover { opacity: 1; color: var(--brillo); }
.menu__abrir { display: none; }

@media (max-width: 860px) {
  .js .menu__abrir { display: inline-flex; min-height: 44px; padding: 0.5rem 1rem; border-radius: 999px; font: 700 0.95rem Sora, Arial, sans-serif;
                     background: transparent; color: var(--tinta-clara); border: 2px solid rgba(241,247,246,.4); cursor: pointer; }
  .js .menu { position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0;
              background: var(--noche); padding: 0.5rem 1.25rem 1.5rem; border-top: 1px solid rgba(241,247,246,.12); display: none; }
  .js .menu.abierto { display: flex; }
  .js .menu a:not(.boton) { padding: 0.9rem 0; border-bottom: 1px solid rgba(241,247,246,.1); }
  .js .menu .boton { margin-top: 1rem; }
  .menu { flex-wrap: wrap; gap: 1rem; }
}

/* ---------- Portada ---------- */
.portada { position: relative; overflow: hidden; background: var(--noche); color: var(--tinta-clara);
           min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
.portada > .envoltura { width: min(100% - 2.5rem, var(--ancho)); }
/* Patron tecnologico oficial (marca/fondos): se usa tal cual, con su opacidad de fabrica. Nunca subirla. */
.portada__patron { position: absolute; inset: 0; pointer-events: none;
                   background: url(../img/patron.svg) center / cover no-repeat; }
.portada__fila { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
                 align-items: center; gap: 3rem; padding-block: clamp(4rem, 10vw, 8rem); }
.portada h1 { font-size: clamp(2.4rem, 5.4vw, 4.1rem); line-height: 1.05; letter-spacing: -0.025em; max-width: 14ch; }
.portada__bajada { font-weight: 300; font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.55; max-width: 36rem; margin-top: 1.5rem; opacity: .9; }
.portada__nota { font-size: 0.9rem; opacity: .7; max-width: 34rem; }
.portada__simbolo { width: 100%; max-width: 22rem; justify-self: end; filter: drop-shadow(0 30px 60px rgba(13,148,136,.25)); }

/* El unico momento animado: el punto cae dentro de la Λ, como una clave que entra y abre. */
.js .portada__punto { animation: entrar 1.1s cubic-bezier(.2,.9,.25,1.15) .35s both; }
@keyframes entrar { from { transform: translateY(-120px); opacity: 0; } 60% { opacity: 1; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .js .portada__punto { animation: none; } }

/* ---------- Probador ---------- */
.probador { background: var(--niebla); padding-block: clamp(4rem, 8vw, 6.5rem); overflow-x: clip; }
.probador__fila { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.probador h2 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); line-height: 1.15; margin-bottom: 1rem; }
.probador__controles > p { color: var(--pizarra); max-width: 32rem; }
.probador__privado { font-size: 0.85rem; margin-top: 1rem; }

.formulario { display: grid; gap: 0.4rem; margin-top: 1.5rem; max-width: 26rem; }
.formulario label, .formulario legend { font-weight: 700; font-size: 0.92rem; }
.formulario input[type=text], .formulario select { font: inherit; color: var(--petroleo); background: var(--blanco); min-height: 48px;
            border: 1.5px solid var(--linea); border-radius: var(--radio-chico); padding: 0.6rem 0.9rem; margin-bottom: 0.8rem; width: 100%; }
.formulario input[type=text]:focus, .formulario select:focus { border-color: var(--turquesa); }
.formulario fieldset { border: 0; padding: 0; margin: 0; }
.estilos { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.5rem; }
.estilos label { position: relative; }
.estilos input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.estilos span { display: inline-flex; min-height: 44px; align-items: center; padding: 0.5rem 1.1rem; border-radius: 999px; font-weight: 400;
                border: 1.5px solid var(--linea); background: var(--blanco); cursor: pointer; }
.estilos input:checked + span { background: var(--petroleo); color: var(--tinta-clara); border-color: var(--petroleo); }
.estilos input:focus-visible + span { outline: 3px solid var(--turquesa); outline-offset: 2px; }

/* Boceto: los colores son del cliente imaginario, no de CLAVE (por eso viven en variables propias). */
.boceto { --b-fondo: #FFF8F1; --b-tinta: #3B2416; --b-acento: #C2551F; --b-acento-tinta: #FFFFFF; --b-peso: 700; --b-espaciado: -0.01em; --b-mayus: none;
          position: relative; padding-bottom: 2.5rem; }
.boceto[data-estilo=clasico] { --b-fondo: #F6F4EE; --b-tinta: #1F2A44; --b-acento: #1F2A44; --b-acento-tinta: #F6F4EE; --b-peso: 300; --b-espaciado: 0.08em; --b-mayus: uppercase; }
.boceto[data-estilo=energico] { --b-fondo: #FFF7D6; --b-tinta: #141414; --b-acento: #E5312B; --b-acento-tinta: #FFFFFF; --b-peso: 700; --b-espaciado: -0.03em; --b-mayus: none; }
.boceto__web { background: var(--blanco); border-radius: var(--radio); box-shadow: 0 24px 60px -24px rgba(15,42,51,.35); overflow: hidden; }
.boceto__barra { display: flex; align-items: center; gap: 6px; padding: 0.7rem 0.9rem; background: #F3F6F6; border-bottom: 1px solid var(--linea); }
.boceto__barra i { width: 10px; height: 10px; border-radius: 50%; background: #CBD7D5; }
.boceto__url { margin-left: 0.6rem; font-size: 0.78rem; color: var(--pizarra); background: var(--blanco); padding: 0.2rem 0.8rem; border-radius: 999px; }
.boceto__pagina { background: var(--b-fondo); color: var(--b-tinta); padding: 1.4rem 1.6rem 2.2rem; transition: background-color .3s, color .3s; }
.boceto__nav { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 2.4rem; }
.boceto__nombre { font-weight: var(--b-peso); letter-spacing: var(--b-espaciado); text-transform: var(--b-mayus); }
.boceto__menu { margin-left: auto; font-size: 0.75rem; opacity: .7; }
.boceto__mono { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--b-acento); color: var(--b-acento-tinta);
                font-weight: 700; font-size: 0.8rem; letter-spacing: 0.02em; transition: background-color .3s; }
.boceto[data-estilo=clasico] .boceto__mono { border-radius: 4px; }
.boceto[data-estilo=energico] .boceto__mono { border-radius: 10px; transform: rotate(-6deg); }
.boceto__titulo { font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1.15; font-weight: var(--b-peso); letter-spacing: var(--b-espaciado); max-width: 18ch; margin-bottom: 0.6rem; }
.boceto__texto { font-size: 0.92rem; opacity: .8; }
.boceto__boton { display: inline-block; margin-top: 0.4rem; background: var(--b-acento); color: var(--b-acento-tinta); padding: 0.55rem 1.1rem; border-radius: 999px; font-size: 0.85rem; font-weight: 700; }
.boceto[data-estilo=clasico] .boceto__boton { border-radius: 2px; letter-spacing: 0.06em; }
.boceto__tarjeta { position: absolute; right: -0.5rem; bottom: 0; width: min(62%, 17rem); display: flex; align-items: center; gap: 0.8rem;
                   background: var(--b-tinta); color: var(--b-fondo); padding: 1.1rem 1.2rem; border-radius: 10px; box-shadow: 0 18px 40px -16px rgba(15,42,51,.5);
                   transform: rotate(3deg); transition: background-color .3s, color .3s; }
.boceto__tarjeta .boceto__nombre { display: block; font-size: 0.95rem; }
.boceto__mono--grande { width: 44px; height: 44px; font-size: 0.95rem; flex: none; }
.boceto__rubro { display: block; font-size: 0.75rem; opacity: .75; }
.boceto__pie { position: absolute; left: 0; bottom: 0; font-size: 0.78rem; color: var(--pizarra); margin: 0; }

/* ---------- Secciones ---------- */
.seccion { padding-block: clamp(4rem, 8vw, 6.5rem); }
.seccion--niebla { background: var(--niebla); }
.seccion--oscura { background: var(--petroleo); color: var(--tinta-clara); }
.seccion h2 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); line-height: 1.12; letter-spacing: -0.015em; max-width: 22ch; }
.seccion__bajada { color: var(--pizarra); max-width: 44rem; margin-top: 1rem; }
.seccion > .envoltura > h2 + .seccion__bajada { margin-bottom: 2.5rem; }
.seccion > .envoltura > h2:not(:has(+ .seccion__bajada)) { margin-bottom: 2.5rem; }

/* Servicios: filas, no tarjetas iguales */
.servicio { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr) minmax(0, 0.6fr); gap: 1rem 3rem;
            grid-template-rows: auto 1fr; padding-block: 2rem; border-top: 1px solid var(--linea); align-items: start; }
.servicio:last-child { border-bottom: 1px solid var(--linea); }
.servicio h3 { font-size: 1.4rem; line-height: 1.2; }
.servicio__que { grid-column: 1; color: var(--pizarra); font-size: 0.98rem; margin: 0; }
.servicio ul { grid-column: 2; grid-row: 1 / span 2; margin: 0; padding: 0; list-style: none; }
.servicio li { position: relative; padding-left: 1.4rem; margin-bottom: 0.6rem; }
.servicio li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 7px; height: 7px; border-radius: 50%; background: var(--turquesa); }
.servicio__precio { grid-column: 3; grid-row: 1 / span 2; margin: 0; text-align: right; color: var(--pizarra); font-size: 0.95rem; }
.servicio__precio b { display: block; font-size: 1.5rem; color: var(--petroleo); margin-bottom: 0.6rem; }

/* Planes */
.pestanas { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; }
.pestanas [role=tab] { font: 700 0.95rem Sora, Arial, sans-serif; min-height: 44px; padding: 0.55rem 1.2rem; border-radius: 999px; cursor: pointer;
                       background: var(--blanco); color: var(--petroleo); border: 1.5px solid var(--linea); }
.pestanas [role=tab][aria-selected=true] { background: var(--petroleo); color: var(--tinta-clara); border-color: var(--petroleo); }
html:not(.js) .pestanas { display: none; }
.panel__titulo { font-size: 1.3rem; margin-bottom: 1rem; }
.js .panel__titulo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
html:not(.js) .panel + .panel { margin-top: 3rem; }
.js .panel[hidden] { display: none; }
.planes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.planes--uno { grid-template-columns: minmax(0, 36rem); }
.planes--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.plan { background: var(--blanco); border-radius: var(--radio); padding: 2rem; border: 1.5px solid transparent; display: flex; flex-direction: column; }
.plan--destacado { border-color: var(--turquesa); }
.plan h4 { font-size: 1.25rem; }
.plan__para { color: var(--pizarra); font-size: 0.95rem; margin: 0.4rem 0 1.2rem; }
.plan__precio { font-size: 2.4rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1; margin: 0 0 0.4rem; }
.plan__precio small { font-size: 1rem; font-weight: 400; color: var(--pizarra); }
.plan__luego { font-size: 0.85rem; color: var(--pizarra); margin-bottom: 1.4rem; }
.plan ul { margin: 0 0 1.4rem; padding: 0; list-style: none; flex: 1; }
.plan li { position: relative; padding-left: 1.6rem; margin-bottom: 0.55rem; font-size: 0.97rem; }
.plan li::before { content: ""; position: absolute; left: 0.1rem; top: 0.45em; width: 0.55rem; height: 0.3rem;
                   border-left: 2px solid var(--turquesa); border-bottom: 2px solid var(--turquesa); transform: rotate(-45deg); }
.plan__plazo { font-size: 0.88rem; font-weight: 700; margin: 0; padding-top: 1rem; border-top: 1px solid var(--niebla); }
.panel__nota { font-size: 0.9rem; color: var(--pizarra); max-width: 48rem; margin-top: 1.5rem; }

/* Proceso */
.pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; counter-reset: paso; }
.pasos li { counter-increment: paso; padding-top: 1.2rem; border-top: 3px solid var(--petroleo); }
.pasos li::before { content: counter(paso); display: block; font-size: 2.6rem; font-weight: 700; line-height: 1; color: var(--turquesa); margin-bottom: 0.8rem; }
.pasos h3 { font-size: 1.15rem; margin-bottom: 0.5rem; }
.pasos p { color: var(--pizarra); font-size: 0.97rem; margin: 0; }

/* Compromisos */
.compromisos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; margin: 0; }
.compromisos dt { font-weight: 700; font-size: 1.15rem; color: var(--brillo); margin-bottom: 0.5rem; }
.compromisos dd { margin: 0; opacity: .85; font-size: 0.97rem; }

/* Trabajo */
.trabajos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.trabajo { border: 1.5px solid var(--linea); border-radius: var(--radio); padding: 2rem; }
.trabajo { padding: 0; overflow: hidden; }
.trabajo__imagen { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: top; border-bottom: 1.5px solid var(--linea); }
.trabajo h3, .trabajo p, .trabajo a { margin-inline: 2rem; }
.trabajo h3 { margin-top: 1.6rem; }
.trabajo a { display: inline-block; margin-bottom: 2rem; }
.trabajo h3 { font-size: 1.2rem; margin-bottom: 0.5rem; }
.trabajo p { color: var(--pizarra); font-size: 0.97rem; }
.trabajo p:last-child { margin-bottom: 2rem; }
.trabajo a { font-weight: 700; color: var(--petroleo); }

/* Preguntas */
details { border-bottom: 1px solid var(--linea); }
details:first-of-type { border-top: 1px solid var(--linea); }
summary { cursor: pointer; list-style: none; padding: 1.25rem 2.5rem 1.25rem 0; font-weight: 700; position: relative; }
summary::-webkit-details-marker { display: none; }
summary::after { content: ""; position: absolute; right: 0.5rem; top: 50%; width: 10px; height: 10px; margin-top: -7px;
                 border-right: 2px solid var(--turquesa); border-bottom: 2px solid var(--turquesa); transform: rotate(45deg); transition: transform .2s; }
details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
details p { color: var(--pizarra); padding-right: 2.5rem; }
#preguntas h2 { margin-bottom: 2rem; }

/* Cierre */
.cierre { position: relative; overflow: hidden; background: var(--noche); color: var(--tinta-clara); padding-block: clamp(4.5rem, 9vw, 7rem); }
.cierre .envoltura { position: relative; }
.cierre h2 { font-size: clamp(2rem, 4.4vw, 3.2rem); line-height: 1.08; letter-spacing: -0.02em; max-width: 16ch; margin-bottom: 1rem; }
.cierre p { opacity: .85; max-width: 34rem; }

/* Pie */
.pie { background: var(--noche); color: var(--tinta-clara); border-top: 1px solid rgba(241,247,246,.1); padding-block: 3rem; font-size: 0.9rem; }
.pie__fila { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; align-items: start; }
.pie img { width: 160px; margin: -0.6rem 0 0.6rem -0.9rem; }
.pie p { opacity: .7; max-width: 26rem; }
.pie nav, .pie__contacto { display: grid; gap: 0.6rem; }
.pie a { opacity: .85; text-decoration: none; }
.pie a:hover { opacity: 1; color: var(--brillo); }

/* ---------- Paginas legales ---------- */
.legal { padding-block: clamp(3rem, 7vw, 5rem); }
.legal h1 { font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1.1; margin-bottom: 0.8rem; }
.legal .bajada { color: var(--pizarra); font-size: 1.1rem; }
.legal .version { display: inline-block; background: var(--niebla); padding: 0.3rem 0.8rem; border-radius: 6px; font-size: 0.88rem; margin-bottom: 1.5rem; }
.legal h2 { font-size: 1.35rem; color: var(--turquesa); margin: 2.5rem 0 0.8rem; }
.legal h3 { font-size: 1.05rem; margin: 1.5rem 0 0.5rem; }
.legal ul, .legal ol { padding-left: 1.3rem; }
.legal li { margin-bottom: 0.4rem; }
.legal table { width: 100%; border-collapse: collapse; margin: 1rem 0 1.5rem; font-size: 0.95rem; display: block; overflow-x: auto; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--linea); }
.legal th { background: var(--niebla); }
.legal caption { text-align: left; font-weight: 700; margin-bottom: 0.5rem; }

/* ---------- Responsivo ---------- */
@media (max-width: 960px) {
  .portada__fila { grid-template-columns: 1fr; }
  .portada__simbolo { order: -1; justify-self: start; max-width: 7rem; }
  .probador__fila { grid-template-columns: 1fr; }
  .servicio { grid-template-columns: 1fr; gap: 0.8rem; }
  .servicio > * { grid-column: 1 !important; grid-row: auto !important; }
  .servicio__precio { text-align: left; }
  .servicio__precio b { display: inline; font-size: 1.25rem; }
  .pasos, .compromisos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .planes--tres { grid-template-columns: 1fr; max-width: 36rem; }
  .pie__fila { grid-template-columns: 1fr 1fr; }
  .pie__fila > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  :root { --texto: 1rem; }
  .planes, .trabajos { grid-template-columns: 1fr; }
  .pasos, .compromisos { grid-template-columns: 1fr; }
  .plan { padding: 1.5rem; }
  .boceto__tarjeta { position: relative; right: auto; width: 85%; margin: -1.5rem 0 0 auto; }
  .boceto { padding-bottom: 2rem; }
  .boceto__menu { display: none; }
  .pie__fila { grid-template-columns: 1fr; }
  .acciones .boton { width: 100%; }
}