/* ============================================================
   fgbuzon.com — dossier editorial
   Papel, retícula, reglas capilares. Numeración en el margen.
   ============================================================ */

:root{
  /* tinta y papel */
  --papel:#F2EFE7;
  --papel-hondo:#EAE6DC;
  --tinta:#14201B;
  --tinta-suave:#5B6A63;
  --tinta-tenue:#616C66;
  --regla:#D9D4C7;
  --verde:#146B45;
  --verde-vivo:#17845C;
  --grano:.035;

  /* tipografía */
  --display:'Fraunces','Georgia',serif;
  --texto:'Archivo','Helvetica Neue',Arial,sans-serif;

  /* medidas */
  --gutter:clamp(1.25rem, 4vw, 3rem);
  --ancho:78rem;
}
@media (prefers-color-scheme: dark){
  :root{
    --papel:#121916;
    --papel-hondo:#0C120F;
    --tinta:#EFECE3;
    --tinta-suave:#9AA69F;
    --tinta-tenue:#7A8880;
    --regla:#26312C;
    --verde:#3ED294;
    --verde-vivo:#5CDFA6;
    --grano:.05;
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--texto);
  font-size:1rem;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  font-synthesis-weight:none;
}

/* grano de papel sobre todo el lienzo */
body::before{
  content:"";
  position:fixed;inset:0;z-index:1;pointer-events:none;
  opacity:var(--grano);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

a{color:inherit}
img{max-width:100%;display:block}

.env{width:100%;max-width:var(--ancho);margin-inline:auto;padding-inline:var(--gutter)}

/* ---------- tipografía base ---------- */
h1,h2,h3{font-family:var(--display);font-weight:500;font-optical-sizing:auto;margin:0}
h1{
  font-size:clamp(2.75rem,7.5vw,5.75rem);
  line-height:.98;letter-spacing:-.035em;
  font-variation-settings:'SOFT' 0,'WONK' 1,'opsz' 84;
}
h2{
  font-size:clamp(1.875rem,4vw,3rem);
  line-height:1.06;letter-spacing:-.025em;
  font-variation-settings:'SOFT' 0,'WONK' 1,'opsz' 40;
}
h3{font-size:1.25rem;line-height:1.2;letter-spacing:-.015em}
p{margin:0}

.folio{
  display:block;font-family:var(--texto);
  font-size:.6875rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--tinta-tenue);
}
em.acento{font-style:italic;font-variation-settings:'SOFT' 40,'WONK' 1}

/* ---------- cabecera ---------- */
.cabecera{
  position:sticky;top:0;z-index:30;
  background:color-mix(in srgb, var(--papel) 86%, transparent);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--regla);
}
.cabecera .env{display:flex;align-items:center;justify-content:space-between;gap:1rem;
               height:3.75rem}
.marca{
  display:inline-flex;align-items:baseline;text-decoration:none;
  font-family:var(--texto);font-weight:700;font-size:1.1875rem;
  letter-spacing:-.05em;color:var(--tinta);
}
.marca .punto{color:var(--verde)}
.menu{display:flex;align-items:center;gap:2rem}
.menu a{
  position:relative;text-decoration:none;font-size:.8125rem;font-weight:500;
  letter-spacing:.02em;color:var(--tinta-suave);padding-block:.25rem;
}
.menu a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
  background:var(--verde);transition:width .28s cubic-bezier(.2,.7,.3,1);
}
.menu a:hover{color:var(--tinta)}
.menu a:hover::after{width:100%}
.menu .contacto-enlace{color:var(--tinta);font-weight:600}
@media (max-width:47.9375rem){ .menu .solo-ancho{display:none} }

/* ---------- botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.625rem;
  font-family:var(--texto);font-size:.875rem;font-weight:600;letter-spacing:.01em;
  text-decoration:none;padding:.8125rem 1.5rem;border:1px solid transparent;
  border-radius:2rem;cursor:pointer;
  transition:background .2s,color .2s,border-color .2s,transform .2s;
}
.btn-solido{background:var(--tinta);color:var(--papel)}
.btn-solido:hover{background:var(--verde);color:#fff}
@media (prefers-color-scheme: dark){ .btn-solido:hover{color:#0B120F} }
.btn-linea{background:transparent;color:var(--tinta);border-color:var(--regla)}
.btn-linea:hover{border-color:var(--tinta);}
.btn:active{transform:translateY(1px)}
.botonera{display:flex;flex-wrap:wrap;gap:.75rem}

/* ---------- portada ---------- */
.portada{position:relative;padding:clamp(3.5rem,9vw,7rem) 0 clamp(3rem,6vw,5rem)}
.portada .env{display:grid;grid-template-columns:1fr;gap:clamp(2.5rem,5vw,4rem)}
@media (min-width:60rem){
  .portada .env{grid-template-columns:minmax(0,1.55fr) minmax(15rem,.85fr);
                align-items:end;gap:clamp(3rem,6vw,6rem)}
}
.portada h1{margin-bottom:1.75rem;max-width:14ch}
.entradilla{
  max-width:34rem;font-size:clamp(1.0625rem,1.6vw,1.1875rem);
  color:var(--tinta-suave);margin-bottom:2rem;
}
.pie-cta{margin-top:1.25rem;font-size:.8125rem;color:var(--tinta-tenue)}

/* ficha técnica de la portada */
.ficha{border-top:2px solid var(--tinta);padding-top:1.125rem}
.ficha dl{margin:0;display:grid;gap:0}
.ficha .fila{
  display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:baseline;
  padding:.75rem 0;border-bottom:1px solid var(--regla);
}
.ficha dt{font-size:.6875rem;font-weight:600;letter-spacing:.16em;
          text-transform:uppercase;color:var(--tinta-tenue)}
.ficha dd{margin:0;text-align:right;font-size:.9375rem;font-weight:500}
.ficha dd a{text-decoration:none;border-bottom:1px solid var(--regla)}
.ficha dd a:hover{border-color:var(--verde);color:var(--verde)}
.pulso{
  display:inline-block;width:.4375rem;height:.4375rem;border-radius:50%;
  background:var(--verde);margin-right:.5rem;vertical-align:middle;
  animation:latir 2.6s ease-in-out infinite;
}
@keyframes latir{0%,100%{opacity:1}50%{opacity:.35}}

/* ---------- tira de sectores ---------- */
.tira{
  border-block:1px solid var(--regla);
  padding:1.125rem 0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.tira .rueda{display:flex;gap:2.5rem;width:max-content;animation:rodar 42s linear infinite}
.tira span{
  display:inline-flex;align-items:center;gap:.75rem;white-space:nowrap;
  font-size:.8125rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  color:var(--tinta-suave);
}
.tira span::before{content:"";width:.3125rem;height:.3125rem;border-radius:50%;
                   background:var(--verde);flex:0 0 auto}
@keyframes rodar{to{transform:translateX(-50%)}}
.tira:hover .rueda{animation-play-state:paused}

/* ---------- secciones ---------- */
.seccion{padding:clamp(4rem,8vw,7rem) 0;scroll-margin-top:4.5rem}
.seccion + .seccion{border-top:1px solid var(--regla)}
.encabezado{
  display:grid;grid-template-columns:1fr;gap:1rem;
  margin-bottom:clamp(2.5rem,5vw,4rem);
}
@media (min-width:60rem){
  .encabezado{grid-template-columns:12rem minmax(0,1fr);gap:clamp(2rem,5vw,4rem);
              align-items:start}
}
.encabezado .folio{padding-top:.75rem}
.encabezado h2{max-width:20ch}
.encabezado .apunte{margin-top:1rem;max-width:44ch;color:var(--tinta-suave);font-size:1.0625rem}

/* ---------- declaración ---------- */
.declaracion{padding-block:clamp(5rem,11vw,9rem)}
.declaracion .folio{margin-bottom:clamp(1.75rem,4vw,3rem)}
.manifiesto{
  margin:0;max-width:20ch;
  font-family:var(--display);font-weight:400;
  font-size:clamp(2rem,5.6vw,3.75rem);
  line-height:1.1;letter-spacing:-.03em;
  font-variation-settings:'SOFT' 0,'WONK' 1;
}
.manifiesto strong{font-weight:500;color:var(--verde)}

/* ---------- índice de trabajo ---------- */
.indice{border-top:1px solid var(--tinta)}
.entrada{
  display:grid;grid-template-columns:1fr;gap:.625rem;
  padding:clamp(1.5rem,3vw,2.25rem) clamp(.75rem,2vw,1.25rem);
  margin-inline:calc(clamp(.75rem,2vw,1.25rem) * -1);
  border-bottom:1px solid var(--regla);
  position:relative;transition:background .3s cubic-bezier(.2,.7,.3,1);
}
.entrada:hover{background:color-mix(in srgb, var(--verde) 6%, transparent)}
@media (min-width:40rem) and (max-width:60rem){
  .entrada{grid-template-columns:3.25rem minmax(0,1fr);column-gap:1.5rem;row-gap:.75rem}
  .entrada .cifra{grid-row:1}
  .entrada h3,
  .entrada .desarrollo{grid-column:2}
  .entrada .btn{grid-column:2;justify-self:start}
}
@media (min-width:60rem){
  .entrada{grid-template-columns:5rem minmax(0,18rem) minmax(0,1fr);
           gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
}
.entrada .cifra{
  font-family:var(--display);font-size:clamp(1.5rem,3vw,2.25rem);
  line-height:1;font-variation-settings:'WONK' 1;
  color:var(--tinta-tenue);transition:color .3s;
}
.entrada:hover .cifra{color:var(--verde)}
.entrada h3{font-size:clamp(1.375rem,2.4vw,1.75rem);font-variation-settings:'SOFT' 0,'WONK' 1}
.entrada .desarrollo{color:var(--tinta-suave);font-size:.9375rem;max-width:46ch}
.entrada .desarrollo b{display:block;color:var(--tinta);font-weight:600;margin-bottom:.375rem;
                       font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase}
.entrada .etiquetas{display:flex;flex-wrap:wrap;gap:.4375rem;margin-top:.875rem}
.entrada .etiquetas i{
  font-style:normal;font-size:.75rem;color:var(--tinta-suave);
  border:1px solid var(--regla);border-radius:1rem;padding:.1875rem .625rem;
}

/* ---------- formatos (tabla) ---------- */
.ocultovisual{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;
}
.tabla-formatos table{width:100%;border-collapse:collapse;text-align:left}
.tabla-formatos th,.tabla-formatos td{
  padding:1.125rem 1.25rem;border-bottom:1px solid var(--regla);
  vertical-align:top;font-size:.9375rem;
}
.tabla-formatos thead th{
  position:relative;
  /* Hueco reservado para el distintivo en las tres columnas: si solo lo
     tuviera la destacada, su título bajaría y rompería la alineación. */
  padding-top:2.75rem;
  border-bottom:2px solid var(--tinta);
  font-family:var(--display);font-size:1.375rem;font-weight:500;
  letter-spacing:-.02em;font-variation-settings:'WONK' 1;
  line-height:1.15;
}
/* Cada trozo del encabezado en su propia línea: si va en línea, el
   distintivo empuja al título y descuadra la columna destacada. */
.tabla-formatos thead th > span{display:block}
.tabla-formatos thead th > span:not(.marca-col){
  margin-top:.5rem;font-family:var(--texto);font-size:.8125rem;
  font-weight:400;letter-spacing:0;color:var(--tinta-suave);max-width:20ch;
}
.marca-col{
  position:absolute;top:1.25rem;left:1.25rem;
  font-family:var(--texto);
  font-size:.625rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--verde);
}
.tabla-formatos tbody th{
  font-weight:600;font-size:.75rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--tinta-tenue);white-space:nowrap;
}
.tabla-formatos td{color:var(--tinta-suave)}
.tabla-formatos tbody tr{transition:background .25s}
.tabla-formatos tbody tr:hover{background:color-mix(in srgb, var(--tinta) 4%, transparent)}
.tabla-formatos .col-fuerte{background:color-mix(in srgb, var(--verde) 7%, transparent)}
.tabla-formatos thead .col-fuerte{border-radius:.5rem .5rem 0 0}
.tabla-formatos tfoot .col-fuerte{border-radius:0 0 .5rem .5rem}
.tabla-formatos tfoot td{border-bottom:0;padding-top:1.5rem}
.tabla-formatos tfoot .btn{width:100%}
.tabla-formatos .sin-borde{border:0}

/* En pantallas estrechas la tabla se apila: cada criterio pasa a ser una
   ficha con las tres respuestas etiquetadas. Antes obligaba a arrastrar la
   página a lo ancho para leerla. */
@media (max-width:56rem){
  .marca-col{position:static}
  .tabla-formatos table,
  .tabla-formatos tbody,
  .tabla-formatos tfoot,
  .tabla-formatos tr,
  .tabla-formatos th,
  .tabla-formatos td{display:block;width:auto}
  .tabla-formatos thead{display:none}

  .tabla-formatos tbody tr{
    border:1px solid var(--regla);border-radius:.75rem;
    padding:1.375rem;margin-bottom:1rem;
  }
  .tabla-formatos tbody th{
    padding:0 0 1rem;border-bottom:1px solid var(--regla);margin-bottom:1rem;
    white-space:normal;
  }
  .tabla-formatos tbody td{padding:0 0 1rem;border-bottom:0}
  .tabla-formatos tbody tr td:last-child{padding-bottom:0}
  .tabla-formatos tbody td::before{
    content:attr(data-col);display:block;
    font-family:var(--texto);font-size:.75rem;font-weight:600;
    letter-spacing:.06em;color:var(--tinta);margin-bottom:.1875rem;
  }
  .tabla-formatos tbody .col-fuerte::before{color:var(--verde)}
  .tabla-formatos .col-fuerte{background:none}

  /* Los tres botones llevan al mismo sitio. Apilados y sin encabezado que
     los distinga, eran tres «Pedir precio» idénticos sin contexto: queda
     uno solo, a todo el ancho. */
  .tabla-formatos tfoot tr{display:block;margin-top:.25rem}
  .tabla-formatos tfoot td{display:none;padding:0;border-bottom:0}
  .tabla-formatos tfoot td.col-fuerte{display:block}
  .tabla-formatos tfoot .btn{width:100%}
}

/* ---------- método ---------- */
.metodo{display:grid;grid-template-columns:1fr;gap:0}
@media (min-width:40rem) and (max-width:56rem){
  .metodo{grid-template-columns:repeat(2,1fr);column-gap:2rem}
}
@media (min-width:56rem){ .metodo{grid-template-columns:repeat(4,1fr);gap:0} }
.tramo{
  position:relative;padding:2rem 0 0;border-top:1px solid var(--regla);
}
@media (min-width:56rem){ .tramo{padding-right:2rem} }
.tramo::before{
  content:"";position:absolute;top:-1px;left:0;width:2.5rem;height:2px;background:var(--verde);
}
.tramo .cifra{
  display:block;font-family:var(--display);font-size:.8125rem;letter-spacing:.1em;
  color:var(--tinta-tenue);margin-bottom:.75rem;
}
.tramo h3{font-family:var(--texto);font-size:1.0625rem;font-weight:600;margin-bottom:.5rem}
.tramo p{color:var(--tinta-suave);font-size:.9375rem}

/* ---------- contacto ---------- */
.bloque-contacto{display:grid;grid-template-columns:1fr;gap:clamp(2.5rem,5vw,4rem)}
@media (min-width:60rem){ .bloque-contacto{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)} }
.vias{display:grid;gap:clamp(2rem,4vw,2.75rem);align-content:start}
.via{padding-top:1.5rem;border-top:1px solid var(--regla);display:grid;gap:.625rem;
     justify-items:start}
.via:first-child{border-top:2px solid var(--tinta)}
.via h3{font-size:clamp(1.5rem,3vw,2rem);letter-spacing:-.025em;
        font-variation-settings:'SOFT' 0,'WONK' 1}
.via p{color:var(--tinta-suave);font-size:.9375rem;max-width:42ch}
.via .btn,.via .botonera{margin-top:.375rem}

.canales{display:grid;gap:0;align-content:start;border-top:2px solid var(--tinta)}
.canal{
  display:grid;gap:.1875rem;padding:1.125rem 0;border-bottom:1px solid var(--regla);
  text-decoration:none;
}
.canal .que{font-size:.6875rem;font-weight:600;letter-spacing:.14em;
            text-transform:uppercase;color:var(--tinta-tenue)}
.canal .valor{font-size:1.0625rem;font-weight:500;transition:color .2s}
.canal:hover .valor{color:var(--verde)}

/* ---------- pie ---------- */
.pie{background:var(--papel-hondo);border-top:1px solid var(--regla);
     padding:clamp(3rem,6vw,4.5rem) 0 1.75rem;position:relative;z-index:2}
.pie-rejilla{display:grid;grid-template-columns:1fr;gap:2.5rem}
@media (min-width:48rem){ .pie-rejilla{grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem} }
.pie-marca .marca{font-size:1.5rem;margin-bottom:.875rem}
.pie-marca p{color:var(--tinta-suave);font-size:.9375rem;max-width:28ch}
.pie h3{
  margin:0 0 1rem;font-family:var(--texto);font-size:.6875rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-tenue);
}
.pie ul{list-style:none;margin:0;padding:0;display:grid;gap:.625rem}
.pie ul a{text-decoration:none;font-size:.9375rem;color:var(--tinta-suave);transition:color .2s}
.pie ul a:hover{color:var(--verde)}
.firma{
  margin-top:clamp(3rem,7vw,5rem);
  font-family:var(--texto);font-weight:700;
  font-size:clamp(3.25rem,20.5vw,18.5rem);line-height:.78;letter-spacing:-.065em;
  color:var(--tinta);opacity:.07;user-select:none;
}
.firma .punto{color:var(--verde);opacity:1}
@media (prefers-color-scheme: dark){ .firma{opacity:.09} }

.pie-cierre{
  margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--regla);
  display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;align-items:center;justify-content:space-between;
  font-size:.8125rem;color:var(--tinta-tenue);
}
.pie-cierre nav{display:flex;flex-wrap:wrap;gap:1.25rem}
.pie-cierre a{text-decoration:none;transition:color .2s}
.pie-cierre a:hover{color:var(--verde)}

/* ---------- páginas de documento legal ---------- */
.documento{padding:clamp(3rem,7vw,5.5rem) 0 clamp(3rem,6vw,5rem)}
.documento .env{max-width:46rem}
.documento h1{font-size:clamp(2rem,5vw,3.25rem);margin-bottom:.75rem}
.documento .fecha{color:var(--tinta-tenue);font-size:.8125rem;margin-bottom:2.5rem}
.documento h2{font-size:clamp(1.25rem,2.4vw,1.625rem);margin:2.5rem 0 .875rem}
.documento p,.documento li{color:var(--tinta-suave);margin-bottom:1rem}
.documento ul{padding-left:1.125rem}
.documento a{color:var(--tinta)}
.documento table{width:100%;border-collapse:collapse;margin:1.25rem 0 1.5rem;font-size:.9375rem}
.documento th,.documento td{border:1px solid var(--regla);padding:.75rem .875rem;text-align:left}
.documento th{background:var(--papel-hondo);font-size:.8125rem;letter-spacing:.04em}

/* ---------- entrada escalonada ---------- */
.revela{animation:subir .7s cubic-bezier(.2,.7,.3,1) both}
.revela:nth-child(1){animation-delay:.05s}
.revela:nth-child(2){animation-delay:.14s}
.revela:nth-child(3){animation-delay:.23s}
@keyframes subir{from{opacity:0;transform:translateY(1.5rem)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation:none !important;transition:none !important;scroll-behavior:auto !important;
  }
}

/* ============================================================
   Ajustes de móvil
   ============================================================ */
@media (max-width:48rem){
  /* Enlaces de texto con muy poca altura: en pantalla táctil hay que
     acertar en 16 px. Se les da caja sin mover la maqueta. */
  .menu a{padding-block:.75rem}
  .ficha dd a{display:inline-block;padding-block:.375rem}
  .pie ul a{display:inline-block;padding-block:.4375rem}
  .pie-cierre a{display:inline-block;padding-block:.375rem}
  /* Enlaces dentro de una frase: el relleno vertical agranda la zona
     pulsable sin alterar la altura de línea. */
  .pie-cta a,.documento p a{padding-block:.5rem}
  .marca{padding-block:.5rem}

  .portada{padding-top:2.5rem}
  .seccion{padding:3.5rem 0}
}

@media (max-width:48rem){
  /* El pie ocupaba casi 900 px apilado en una sola columna. Los grupos
     de enlaces pasan a dos columnas y se aprieta el espaciado. */
  .pie{padding:2.75rem 0 1.5rem}
  .pie-rejilla{grid-template-columns:1fr 1fr;gap:2rem 1.25rem}
  .pie-marca{grid-column:1 / -1}
  .pie-marca p{max-width:34ch}
  .pie h3{margin-bottom:.625rem}
  .pie ul{gap:.125rem}
  .firma{
  margin-top:clamp(3rem,7vw,5rem);
  font-family:var(--texto);font-weight:700;
  font-size:clamp(3.25rem,20.5vw,18.5rem);line-height:.78;letter-spacing:-.065em;
  color:var(--tinta);opacity:.07;user-select:none;
}
.firma .punto{color:var(--verde);opacity:1}
@media (prefers-color-scheme: dark){ .firma{opacity:.09} }

.pie-cierre{
    margin-top:2rem;flex-direction:column;align-items:flex-start;gap:.25rem;
  }
}

/* En móvil, las tablas de los documentos legales quedaban en columnas de
   poco más de cien píxeles. Se apilan en fichas. */
@media (max-width:40rem){
  .documento table,
  .documento tbody,
  .documento tr,
  .documento th,
  .documento td{display:block;width:auto}
  .documento tr{
    border:1px solid var(--regla);border-radius:.5rem;
    padding:.875rem 1rem;margin-bottom:.75rem;
  }
  .documento th,
  .documento td{border:0;padding:.1875rem 0}
  .documento th{
    background:none;font-size:.6875rem;font-weight:600;letter-spacing:.1em;
    text-transform:uppercase;color:var(--tinta-tenue);
  }
  .documento td{margin-bottom:.5rem}
  .documento tr td:last-child{margin-bottom:0}
}

/* ============================================================
   Atajo flotante de WhatsApp
   Cápsula con la misma retícula que el resto: papel, filete fino y el
   punto verde de la marca. Nada de círculo verde con logotipo: rompería
   el tono del documento.
   ============================================================ */
.flotante{
  position:fixed;z-index:40;
  right:clamp(1rem,4vw,2rem);
  bottom:calc(clamp(1rem,4vw,2rem) + env(safe-area-inset-bottom, 0px));
  display:inline-flex;align-items:center;gap:.5625rem;
  padding:.6875rem 1.125rem .6875rem .9375rem;
  background:var(--papel);color:var(--tinta);
  border:1px solid var(--tinta);border-radius:2rem;
  font-family:var(--texto);font-size:.875rem;font-weight:600;
  letter-spacing:.01em;text-decoration:none;
  box-shadow:0 6px 24px rgba(20,32,27,.14);
  /* Sin animación de entrada: una transición congelada dejaría el botón
     en opacidad cero y no habría manera de recuperarlo. Aparece y ya. */
  transition:background .2s, color .2s, border-color .2s, transform .12s;
}
@media (prefers-color-scheme: dark){
  .flotante{box-shadow:0 6px 24px rgba(0,0,0,.45)}
}
/* [hidden] necesita más peso que .flotante para poder con su display. */
.flotante[hidden]{display:none}
.flotante svg{width:1.125rem;height:1.125rem;flex:0 0 auto;color:var(--verde)}
.flotante:hover{background:var(--tinta);color:var(--papel);border-color:var(--tinta)}
.flotante:hover svg{color:var(--verde-vivo)}
.flotante:focus-visible{outline:2px solid var(--verde);outline-offset:3px}
.flotante:active{transform:translateY(1px)}

/* El pie es lo último: que la cápsula no se quede encima del copyright. */
@media (max-width:40rem){
  .flotante{padding:.625rem 1rem .625rem .875rem;font-size:.8125rem}
}
@media (prefers-reduced-motion: reduce){
  .flotante{transform:none}
}