/* ==========================================================================
   GACP Paralegal Services Inc.
   Paleta tomada del logo (tinta azul + oro) y de la oficina de Gisell.
   La firma visual son "las placas": etiquetas grabadas en monoespaciada con
   filete dorado, como las placas de bronce de su escritorio.
   ========================================================================== */

:root{
  --tinta:        #0B1626;
  --tinta-alta:   #13243A;
  --tinta-honda:  #070F1B;
  --oro:          #C9A227;
  --oro-luz:      #E6CC85;
  --oro-hondo:    #7A6114;
  --papel:        #FAF8F4;
  --papel-hondo:  #F1ECE3;
  --grafito:      #26303D;
  --grafito-suave:#5B6775;
  --verde:        #0C7439;
  --verde-alto:   #0A5F2F;
  --claro-suave:  #BFC9D6;
  --claro-tenue:  #8794A6;
  --estrella-off: #7B838D;

  --display: "Newsreader", Georgia, "Times New Roman", serif;
  --texto:   "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --ancho: 1120px;
  --gutter: clamp(20px, 5vw, 48px);
  --radio: 4px;
  --curva: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--papel);
  color:var(--grafito);
  font-family:var(--texto);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.sin-scroll{ overflow:hidden; }

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }

svg{
  fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
  /* Tamaño por defecto: si una regla concreta no llegara a aplicarse, un icono
     nunca debe crecer hasta ocupar la pantalla. */
  width:20px; height:20px; flex:0 0 auto;
}
.wa__icono,.flotante svg,.estrellas svg,.pico svg{ fill:currentColor; stroke:none; }
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }

.saltar{
  position:absolute; left:-9999px; top:0; z-index:300;
  background:var(--oro); color:var(--tinta);
  padding:12px 20px; font-weight:600; text-decoration:none;
}
.saltar:focus{ left:12px; top:12px; }
:focus-visible{
  outline:3px solid var(--tinta); outline-offset:2px; border-radius:2px;
  box-shadow:0 0 0 6px var(--oro-luz);
}
.barra :focus-visible,.portada :focus-visible,.bloque--tinta :focus-visible,
.llamada :focus-visible,.pie :focus-visible,.panel__barra :focus-visible,
.nav-movil :focus-visible,.idioma__menu :focus-visible{
  outline-color:#fff; box-shadow:0 0 0 6px rgba(201,162,39,.55);
}

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

/* ────────────────────────────────────────── LA FIRMA: LAS PLACAS */
.placa{
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--oro-luz);
  margin:0 0 22px; padding-top:14px;
  position:relative; display:inline-block;
}
.placa::before{
  content:""; position:absolute; top:0; left:0;
  width:38px; height:1px; background:var(--oro);
}
.placa::before{ transform-origin:left; }
.placa.revela::before{ transform:scaleX(0); transition:transform .7s var(--curva) .22s; }
.placa.revela.visible::before{ transform:scaleX(1); }
.placa--oscura{ color:var(--oro-hondo); }
.placa--mini{ font-size:10px; margin-bottom:16px; }

.sinjs{
  background:var(--tinta); color:var(--claro-suave);
  padding:clamp(28px,5vw,48px) var(--gutter);
  border-bottom:2px solid var(--oro);
}
.sinjs p{ max-width:72ch; margin:0 auto 14px; font-size:16px; line-height:1.7; }
.sinjs strong{ color:#fff; }
.sinjs__via{ display:flex; flex-wrap:wrap; gap:12px; }
.sinjs__via a{
  padding:12px 18px; background:var(--verde); color:#fff;
  text-decoration:none; border-radius:var(--radio); font-weight:600;
}
.sinjs__via a + a{ background:transparent; border:1px solid rgba(255,255,255,.25); }
.sinjs__aviso{ font-size:12.5px; color:#6F7D8E; }

/* ──────────────────────────────────────────── BARRA DE PROGRESO */
.progreso{
  position:fixed; inset:0 0 auto 0; height:2px; z-index:140;
  background:transparent; pointer-events:none;
}
.progreso i{
  display:block; height:100%; width:100%;
  background:linear-gradient(90deg, var(--oro), var(--oro-luz));
  transform:scaleX(0); transform-origin:left;
}

/* ────────────────────────────────────────────── BARRA SUPERIOR */
.barra{
  position:sticky; top:0; z-index:100;
  background:rgba(7,15,27,.9);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid rgba(201,162,39,.2);
}
.barra__caja{
  width:100%; max-width:var(--ancho);
  margin-inline:auto; padding:14px var(--gutter);
  display:flex; align-items:center; gap:20px;
  transition:padding .3s var(--curva);
}
.barra--compacta .barra__caja{ padding-block:9px; }

.marca{ text-decoration:none; display:flex; align-items:baseline; gap:10px; flex:0 0 auto; }
.marca__sigla{
  font-family:var(--display); font-size:24px; font-weight:500;
  letter-spacing:.06em; color:#fff; line-height:1;
}
.marca__linea{ width:1px; height:17px; background:var(--oro); opacity:.65; }
.marca__pie{
  font-family:var(--mono); font-size:10px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--claro-suave);
}

.nav{ margin-left:auto; display:flex; gap:24px; }
.nav a{
  font-size:14.5px; color:var(--claro-suave); text-decoration:none;
  padding:4px 0; position:relative; transition:color .22s var(--curva);
  white-space:nowrap;
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--oro); transition:width .28s var(--curva);
}
.nav a:hover{ color:#fff; }
.nav a:hover::after{ width:100%; }
.nav a.aqui{ color:#fff; }
.nav a.aqui::after{ width:100%; background:var(--oro); }

.solo-lectores{
  position:absolute; width:1px; height:1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}

.menu-boton{
  display:none; align-items:center; justify-content:center;
  width:44px; height:44px; flex:0 0 auto;
  background:transparent; border:0;
  color:var(--claro-suave); cursor:pointer;
  transition:color .22s var(--curva);
}
.menu-boton svg{ width:22px; height:22px; stroke-width:1.4; }
.menu-boton:hover{ color:var(--oro-luz); }
.menu-boton[aria-expanded="true"] svg{ display:none; }
.menu-boton[aria-expanded="true"]::after{
  content:""; width:17px; height:17px;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center/contain no-repeat;
}

.nav-movil{
  display:none; flex-direction:column;
  border-top:1px solid rgba(201,162,39,.2);
  background:var(--tinta-honda);
}
.nav-movil a{
  padding:15px var(--gutter);
  color:var(--claro-suave); text-decoration:none; font-size:16px;
  border-bottom:1px solid rgba(255,255,255,.06);
  transition:background .18s var(--curva), color .18s var(--curva);
}
.nav-movil a:last-child{ border-bottom:0; }
.nav-movil a:active,.nav-movil a:hover{ background:rgba(201,162,39,.1); color:#fff; }

/* ─────────────────────────────────────────── SELECTOR DE IDIOMA */
.idioma{ position:relative; flex:0 0 auto; }
.idioma__boton{
  display:inline-flex; align-items:center; gap:8px;
  min-height:44px; padding:7px 4px;
  background:transparent; border:0; cursor:pointer;
  color:var(--claro-suave); font-size:15px; letter-spacing:.01em;
  transition:color .22s var(--curva);
}
.idioma__boton::after{
  content:""; width:7px; height:7px; flex:0 0 auto;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
  transition:transform .25s var(--curva);
}
.idioma__boton[aria-expanded="true"]::after{ transform:translateY(1px) rotate(225deg); }
.idioma__boton:hover{ color:var(--oro-luz); }
.idioma__globo{ width:17px; height:17px; stroke-width:1.3; color:var(--oro); }

.idioma__breve{ display:none; }
@media (max-width:1100px){
  .idioma__largo{ display:none; }
  .idioma__breve{ display:inline; font-family:var(--mono); font-size:12.5px; letter-spacing:.08em; }
}

.idioma__menu{
  position:absolute; right:0; top:calc(100% + 9px); z-index:120;
  list-style:none; margin:0; padding:6px;
  min-width:186px;
  background:var(--tinta-alta);
  border:1px solid rgba(201,162,39,.3);
  border-radius:var(--radio);
  box-shadow:0 18px 44px -18px rgba(0,0,0,.8);
}
.idioma__menu li{ list-style:none; }
.idioma__menu button{
  display:flex; align-items:center; gap:10px; width:100%;
  min-height:46px; padding:9px 10px; border:0; border-radius:3px; cursor:pointer;
  background:transparent; color:var(--claro-suave); font-size:14.5px; text-align:left;
  transition:background .18s var(--curva), color .18s var(--curva);
}
.idioma__menu button:hover{ background:rgba(201,162,39,.12); color:#fff; }
.idioma__corto{
  font-family:var(--mono); font-size:10px; letter-spacing:.1em;
  color:var(--oro); min-width:22px;
}
.idioma__nativo{ flex:1; }
.idioma__tilde{ width:15px; height:15px; color:var(--oro); opacity:0; }
.idioma__menu .activo .idioma__tilde{ opacity:1; }
.idioma__menu .activo{ color:#fff; }

/* ──────────────────────────────────────── BOTONES DE WHATSAPP */
.wa{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background:var(--verde); color:#fff; text-decoration:none;
  font-weight:600; border-radius:var(--radio);
  transition:background .22s var(--curva), transform .22s var(--curva), box-shadow .22s var(--curva);
}
.wa:hover{ background:var(--verde-alto); transform:translateY(-2px); box-shadow:0 10px 24px -10px rgba(15,138,68,.75); }
.wa:active{ transform:translateY(0); }
.wa__icono{ width:19px; height:19px; flex:0 0 auto; }
.wa--chica{ min-height:44px; padding:9px 15px; font-size:14px; flex:0 0 auto; }
.wa__grande{ padding:17px 30px; font-size:17px; }
.wa__grande .wa__icono{ width:22px; height:22px; }

/* ─────────────────────────────────────────── BOTONES AUXILIARES */
.boton-oro{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background:var(--oro); color:var(--tinta);
  border:0; border-radius:var(--radio); cursor:pointer;
  padding:15px 26px; font-size:16px; font-weight:600;
  transition:background .22s var(--curva), transform .22s var(--curva), box-shadow .22s var(--curva);
}
.boton-oro svg{ width:18px; height:18px; transition:transform .25s var(--curva); }
.boton-oro:hover{ background:var(--oro-luz); transform:translateY(-2px); box-shadow:0 12px 26px -12px rgba(201,162,39,.8); }
.boton-oro:hover svg{ transform:translateX(4px); }
.boton-oro:disabled{ opacity:.45; cursor:not-allowed; transform:none; box-shadow:none; }

.fantasma{
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; color:var(--claro-suave);
  border:1px solid rgba(255,255,255,.45); border-radius:var(--radio);
  padding:16px 24px; font-size:16px; cursor:pointer;
  transition:border-color .22s var(--curva), color .22s var(--curva), background .22s var(--curva);
}
.fantasma:hover{ border-color:var(--oro); color:#fff; background:rgba(201,162,39,.08); }

.enlace{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:12px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--oro-luz);
  text-decoration:none; padding-bottom:4px;
  border-bottom:1px solid rgba(201,162,39,.4);
  transition:color .22s var(--curva), border-color .22s var(--curva), gap .22s var(--curva);
}
.enlace:hover{ color:#fff; border-color:#fff; gap:12px; }
.enlace--oscuro{ color:var(--oro-hondo); }
.enlace--oscuro:hover{ color:var(--tinta); border-color:var(--tinta); }

/* ───────────────────────────────────────────────────── PORTADA */
.portada{
  position:relative;
  background:
    radial-gradient(90% 70% at 78% 8%, rgba(201,162,39,.16), transparent 62%),
    linear-gradient(176deg, var(--tinta) 0%, var(--tinta-honda) 100%);
  color:#fff; overflow:hidden;
}
.portada::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.35;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
}
.portada__caja{
  position:relative; z-index:1;
  width:100%; max-width:var(--ancho);
  margin-inline:auto; padding:clamp(48px,6.5vw,80px) var(--gutter) clamp(40px,5vw,60px);
  display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(36px,5vw,64px);
  align-items:stretch;
}
.portada__texto{ display:flex; flex-direction:column; justify-content:center; }
.retrato{ display:flex; flex-direction:column; justify-content:center; }
.retrato__marco{ flex:1 1 auto; display:flex; }
.retrato__marco img{ flex:1 1 auto; aspect-ratio:auto; min-height:0; }
.portada__titulo{
  font-family:var(--display); font-weight:300;
  font-size:clamp(36px,5.2vw,62px); line-height:1.08;
  letter-spacing:-.016em; margin:0 0 24px; color:#fff;
  text-wrap:balance;
}
.portada__titulo em{ font-style:italic; font-weight:300; color:var(--oro-luz); }
.portada__bajada{
  font-size:clamp(16.5px,1.6vw,18.5px); line-height:1.72;
  color:var(--claro-suave); margin:0 0 22px; max-width:50ch;
}

.focos{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  margin:0 0 32px; padding:14px 0;
  border-top:1px solid rgba(201,162,39,.25);
  border-bottom:1px solid rgba(201,162,39,.25);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--oro-luz);
}
.focos span{ display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
.focos i{
  width:4px; height:4px; border-radius:50%;
  background:var(--oro); flex:0 0 auto; opacity:.75;
}

.portada__acciones{ display:flex; flex-wrap:wrap; gap:12px; }
.portada__nota{
  margin:16px 0 0; font-family:var(--mono); font-size:11.5px;
  letter-spacing:.09em; text-transform:uppercase; color:var(--claro-tenue);
}

.retrato{ margin:0; }
.retrato__marco{
  border:1px solid rgba(201,162,39,.45); padding:9px;
  background:rgba(255,255,255,.035);
}
.retrato__marco img{ width:100%; aspect-ratio:4/5; object-fit:cover; }
.retrato__placa{
  margin-top:14px; padding-top:13px;
  border-top:1px solid rgba(201,162,39,.45);
  display:flex; flex-direction:column; gap:5px;
}
.retrato__nombre{
  font-family:var(--display); font-size:19px; font-weight:400;
  letter-spacing:.03em; color:#fff;
}
.retrato__cargo,.retrato__idiomas{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--oro-luz);
}
.retrato__idiomas{ color:var(--claro-tenue); }

.credenciales{
  position:relative; z-index:1; list-style:none; margin:0;
  width:100%; max-width:var(--ancho); margin-inline:auto;
  padding:0 var(--gutter);
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  border-top:1px solid rgba(255,255,255,.1);
}
.credenciales li{
  padding:26px 24px 0 0; display:flex; flex-direction:column;
}
.credenciales strong{ min-height:2.5em; display:flex; align-items:flex-start; }
.credenciales__icono{ width:21px; height:21px; color:var(--oro); margin-bottom:6px; }
.credenciales strong{
  font-family:var(--display); font-size:20px; font-weight:400;
  line-height:1.25; color:var(--oro-luz); margin-bottom:5px;
}
.credenciales span{ font-size:13.5px; color:var(--claro-tenue); line-height:1.45; }

.portada__aviso{
  margin:22px 0 0; padding-top:18px; max-width:62ch;
  border-top:1px solid rgba(255,255,255,.12);
  font-size:13.5px; line-height:1.65; color:var(--claro-tenue);
}

/* ───────────────────────────────────────────────────── BLOQUES */
.bloque{ padding-block:clamp(56px,6.5vw,86px); }
.bloque--papel{ background:var(--papel); color:var(--grafito); }
.bloque--tinta{
  background:var(--tinta); color:var(--claro-suave);
  border-top:1px solid rgba(201,162,39,.22);
  border-bottom:1px solid rgba(201,162,39,.22);
  position:relative; overflow:hidden;
}
/* Renglones de papel pautado: el oficio de la casa es el documento. */
#requisitos::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:repeating-linear-gradient(
    to bottom, transparent 0 31px, rgba(201,162,39,.055) 31px 32px);
  mask-image:linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
}
#requisitos > .caja{ position:relative; z-index:1; }

.titulo{
  font-family:var(--display); font-weight:300;
  font-size:clamp(28px,3.6vw,42px); line-height:1.2;
  letter-spacing:-.012em; color:var(--tinta);
  margin:0 0 22px; max-width:26ch; text-wrap:balance;
}
.titulo--claro{ color:#fff; }
.entrada{
  font-size:17px; line-height:1.7; color:var(--grafito-suave);
  margin:0 0 clamp(34px,4vw,48px); max-width:58ch;
}

/* fichas de servicio */
.rejilla{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:1px; background:rgba(38,48,61,.14);
  border:1px solid rgba(38,48,61,.14);
}
.ficha{
  background:var(--papel); padding:clamp(28px,3.4vw,38px);
  position:relative; transition:background .28s var(--curva);
}
.ficha::before{
  content:""; position:absolute; top:-1px; left:clamp(28px,3.4vw,38px);
  width:30px; height:2px; background:var(--oro); opacity:.4;
  transition:opacity .3s var(--curva), width .35s var(--curva);
}
.ficha:hover{ background:#fff; }
.ficha:hover::before{ opacity:1; width:46px; }
.ficha__icono{ width:26px; height:26px; color:var(--oro-hondo); margin-bottom:18px; stroke-width:1.3; }
.ficha__para{
  margin:0 0 7px; font-family:var(--mono); font-size:10px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--oro-hondo);
}
.ficha h3{
  font-family:var(--display); font-weight:400;
  font-size:clamp(20px,2.1vw,24px); line-height:1.25;
  color:var(--tinta); margin:0 0 12px; letter-spacing:-.005em;
}
.ficha__texto{ margin:0; color:var(--grafito-suave); font-size:16px; line-height:1.68; }

.limite{
  margin:28px 0 0; padding-left:16px;
  border-left:2px solid var(--oro);
  font-family:var(--mono); font-size:12px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--oro-hondo);
}

/* ───────────────────────────────────────── SECCIÓN REQUISITOS */
.requisitos{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(36px,5vw,64px); align-items:center;
}
.requisitos__texto{ display:flex; flex-direction:column; justify-content:center; }
.requisitos__texto p[data-i18n="requisitos.entrada"]{
  color:var(--claro-suave); margin:0 0 32px; max-width:48ch;
}
.requisitos__indice{
  list-style:none; margin:0; padding:clamp(24px,3vw,32px);
  background:var(--tinta-alta); border:1px solid rgba(201,162,39,.28);
  counter-reset:req;
}
.requisitos__indice li{
  display:flex; gap:14px; align-items:baseline;
  padding:12px 0; border-top:1px solid rgba(255,255,255,.08);
  font-size:15px; color:var(--claro-suave);
}
.requisitos__indice li:first-child{ border-top:0; padding-top:0; }
.requisitos__indice li:last-child{ padding-bottom:0; }
.requisitos__indice span{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em;
  color:var(--oro); flex:0 0 auto; transition:color .2s var(--curva);
}
.requisitos__indice li{ transition:color .2s var(--curva), padding-left .25s var(--curva); }
.requisitos__indice:hover li{ color:var(--claro-tenue); }
.requisitos__indice li:hover{ color:#fff; padding-left:6px; }
.requisitos__indice li:hover span{ color:var(--oro-luz); }

/* ──────────────────────────────────────────── PERFIL DE GISELL */
.perfil{
  display:grid; grid-template-columns:1.25fr .75fr;
  gap:clamp(40px,6vw,76px); align-items:center;
}
.perfil__texto p{ color:var(--grafito-suave); margin:0 0 20px; max-width:56ch; }
.perfil__texto .perfil__cargo{
  font-family:var(--mono); font-size:11px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--oro-hondo);
  margin:0 0 30px; padding-bottom:26px;
  border-bottom:1px solid rgba(38,48,61,.16);
}
.credencial{
  position:relative; overflow:hidden;
  background:var(--papel-hondo); border:1px solid rgba(38,48,61,.14);
  padding:clamp(26px,3vw,34px);
  align-self:stretch; display:flex; flex-direction:column; justify-content:center;
}
.credencial::after{
  content:""; position:absolute; right:-34px; bottom:-30px; z-index:0;
  width:188px; height:188px; opacity:.055; pointer-events:none;
  background:var(--tinta);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18M7 7l-4 7a4 4 0 0 0 8 0L7 7Zm10 0-4 7a4 4 0 0 0 8 0l-4-7ZM6 21h12'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18M7 7l-4 7a4 4 0 0 0 8 0L7 7Zm10 0-4 7a4 4 0 0 0 8 0l-4-7ZM6 21h12'/%3E%3C/svg%3E") center/contain no-repeat;
}
.credencial .placa,.credencial dl{ position:relative; z-index:1; }
.credencial .placa{ margin-bottom:20px; }
.credencial dl > div{ padding:13px 0; }
.credencial dd{ font-size:16px; }
.credencial dl{ margin:0; display:flex; flex-direction:column; }
.credencial dl > div{ padding:16px 0; border-top:1px solid rgba(38,48,61,.12); }
.credencial dt{
  font-family:var(--mono); font-size:10px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--oro-hondo); margin-bottom:6px;
}
.credencial dd{
  margin:0; font-family:var(--display); font-weight:400;
  font-size:17px; line-height:1.4; color:var(--tinta);
}

/* ───────────────────────────────────────────────────── PASOS */
.pasos{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(24px,3vw,36px);
}
.pasos li{ padding-top:22px; border-top:1px solid rgba(255,255,255,.16); }
.pasos__num{
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.16em; color:var(--oro); display:block; margin-bottom:14px;
}
.pasos h3{
  font-family:var(--display); font-weight:400; font-size:20px;
  line-height:1.28; color:#fff; margin:0 0 10px;
}
.pasos p{ margin:0; font-size:15.5px; line-height:1.65; color:var(--claro-suave); }

/* ─────────────────────────────────────────────────── RESEÑAS */
.estrellas{ position:relative; display:inline-flex; flex:0 0 auto; }
.estrellas__fondo,.estrellas__frente{ display:flex; gap:3px; }
.estrellas__frente{ position:absolute; inset:0; overflow:hidden; }
.estrellas svg{ width:19px; height:19px; }
.estrellas__fondo{ color:var(--estrella-off); }
.estrellas__frente{ color:var(--oro-hondo); }
.estrellas--chica svg{ width:15px; height:15px; }

.valoracion{
  display:flex; flex-wrap:wrap; align-items:center; gap:clamp(20px,3vw,36px);
  padding:clamp(24px,3vw,32px);
  background:var(--papel-hondo); border:1px solid rgba(38,48,61,.14);
  margin-bottom:clamp(28px,3.5vw,40px);
}
.valoracion__nota{ display:flex; align-items:baseline; gap:6px; }
.valoracion__numero{
  font-family:var(--display); font-size:clamp(42px,5vw,58px);
  font-weight:300; line-height:1; color:var(--tinta);
}
.valoracion__de{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--grafito-suave);
}
.valoracion__detalle{ display:flex; flex-direction:column; gap:7px; }
.valoracion__base{
  margin:0; font-family:var(--mono); font-size:11px;
  letter-spacing:.09em; text-transform:uppercase; color:var(--grafito-suave);
}
.valoracion__acciones{ margin-left:auto; display:flex; flex-wrap:wrap; align-items:center; gap:18px; }

.resenas__lista{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(290px,1fr));
  gap:18px;
}
.resena{
  background:var(--papel); padding:clamp(22px,2.6vw,28px);
  border:1px solid rgba(38,48,61,.14);
}
.resena__cabeza{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.resena__foto{
  width:40px; height:40px; border-radius:50%; object-fit:cover; flex:0 0 auto;
  background:var(--papel-hondo);
}
.resena__foto--letra{
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-size:18px; color:var(--oro-hondo);
  border:1px solid rgba(201,162,39,.4);
}
.resena__quien{ display:flex; flex-direction:column; min-width:0; flex:1; }
.resena__quien strong{ font-size:15.5px; font-weight:600; color:var(--tinta); }
.resena__quien span{
  font-family:var(--mono); font-size:10px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--grafito-suave);
}
.resena__texto{ margin:0; font-size:15.5px; line-height:1.7; color:var(--grafito-suave); }

.mas{
  display:block; margin:26px auto 0; padding:13px 28px;
  background:transparent; border:1px solid rgba(38,48,61,.42);
  border-radius:var(--radio); cursor:pointer; font-size:15px;
  transition:border-color .22s var(--curva), background .22s var(--curva);
}
.mas:hover{ border-color:var(--oro); background:rgba(201,162,39,.07); }

.vacio{
  padding:clamp(34px,4.5vw,52px);
  background:var(--papel-hondo); border:1px solid rgba(38,48,61,.14);
  text-align:center; display:flex; flex-direction:column; align-items:center; gap:12px;
}
.vacio__estrellas{ opacity:.5; }
.vacio__titulo{
  margin:4px 0 0; font-family:var(--display); font-weight:400;
  font-size:clamp(21px,2.4vw,26px); color:var(--tinta);
}
.vacio__texto{ margin:0; max-width:50ch; color:var(--grafito-suave); }
.vacio .valoracion__acciones{ margin:14px 0 0; justify-content:center; }

.resenas__aviso{
  margin:28px 0 0; font-size:12.5px; line-height:1.7;
  color:var(--grafito-suave); max-width:70ch;
}

/* formulario de reseña */
.form-caja{ margin-top:clamp(26px,3.5vw,38px); }
.form-resena{
  background:var(--papel-hondo); border:1px solid rgba(201,162,39,.4);
  padding:clamp(26px,3.4vw,38px);
  display:flex; flex-direction:column; gap:22px;
}
.form-resena__titulo{
  margin:0; font-family:var(--display); font-weight:400;
  font-size:clamp(22px,2.6vw,27px); color:var(--tinta);
}
.form-resena__entrada{ margin:-14px 0 0; font-size:14.5px; color:var(--grafito-suave); }
.form-resena__paso{ display:flex; gap:16px; align-items:flex-start; }
.form-resena__num{
  flex:0 0 auto; width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--oro); color:var(--tinta);
  font-family:var(--mono); font-size:12px; font-weight:500;
}
.form-resena__rotulo{ margin:2px 0 8px; font-weight:600; color:var(--tinta); }
.form-resena__ayuda{ margin:0 0 12px; font-size:14px; color:var(--grafito-suave); max-width:52ch; }
.form-resena textarea{
  width:100%; font:inherit; font-size:16px; line-height:1.6;
  padding:14px 16px; border:1px solid rgba(38,48,61,.42);
  border-radius:var(--radio); background:#fff; color:var(--grafito);
  resize:vertical; min-height:118px;
}
.form-resena textarea:focus{ border-color:var(--oro); outline:none; box-shadow:0 0 0 3px rgba(201,162,39,.16); }
.form-resena__cuenta{
  display:flex; align-items:center; gap:12px;
  padding:12px 14px; background:#fff; border:1px solid rgba(38,48,61,.16); border-radius:var(--radio);
}
.form-resena__cuenta img{ width:34px; height:34px; border-radius:50%; }
.form-resena__cuenta div{ display:flex; flex-direction:column; flex:1; min-width:0; }
.form-resena__cuenta span{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--grafito-suave);
}
.form-resena__salir{
  background:none; border:0; cursor:pointer; padding:0;
  font-size:13px; color:var(--oro-hondo); text-decoration:underline;
}
.form-resena__regla{
  margin:9px 0 0; font-size:13px; line-height:1.55; color:var(--grafito-suave);
}
.form-resena input[type=text],.form-resena input[type=tel]{
  width:100%; font:inherit; font-size:16px;
  padding:13px 16px; border:1px solid rgba(38,48,61,.42);
  border-radius:var(--radio); background:#fff; color:var(--grafito);
}
.form-resena input:focus{ border-color:var(--oro); outline:none; box-shadow:0 0 0 3px rgba(201,162,39,.16); }
.form-resena__privado{
  display:flex; align-items:flex-start; gap:7px;
  color:var(--oro-hondo); font-weight:500;
}
.form-resena__privado svg{ width:15px; height:15px; flex:0 0 auto; margin-top:2px; }

.resena__sello{
  width:15px; height:15px; margin-left:6px; vertical-align:-2px;
  color:var(--verde); stroke-width:1.8;
}
.resena__verificado{
  margin:-8px 0 12px; font-family:var(--mono); font-size:9.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--verde);
}
.resena__respuesta{
  margin:16px 0 0; padding:14px 16px;
  background:var(--papel-hondo); border-left:2px solid var(--oro);
}
.resena__respuestaDe{
  margin:0 0 6px; font-family:var(--mono); font-size:9.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--oro-hondo);
}
.resena__respuesta p:last-child{ margin:0; font-size:14.5px; line-height:1.65; color:var(--grafito-suave); }

.form-resena__error{
  margin:0; padding:11px 14px; border-radius:var(--radio);
  background:#FBEAEA; border:1px solid #E4B4B4; color:#8A2A2A; font-size:14.5px;
}
.form-resena__enviar{ align-self:flex-start; }
.form-resena--listo{
  flex-direction:row; align-items:center; gap:14px;
  border-color:rgba(15,138,68,.45); background:#F1F8F3;
}
.form-resena--listo svg{ width:26px; height:26px; color:var(--verde); stroke-width:2; flex:0 0 auto; }
.form-resena--listo p{ margin:0; font-size:16px; color:var(--grafito); }

.picos{ display:flex; gap:6px; }
.pico{
  background:none; border:0; padding:3px; cursor:pointer; line-height:0;
  color:var(--estrella-off);
  transition:color .16s var(--curva), transform .16s var(--curva);
}
.pico svg{ width:32px; height:32px; }
.pico:hover{ transform:scale(1.12); }
.pico--on{ color:var(--oro-hondo); }
.picos:hover .pico{ color:var(--estrella-off); }
.picos:hover .pico:has(~ .pico:hover),
.picos:hover .pico:hover{ color:var(--oro); }

/* ───────────────────────────────────────────────── LLAMADA */
.llamada{
  background:
    radial-gradient(70% 90% at 50% 0%, rgba(201,162,39,.14), transparent 65%),
    var(--tinta-honda);
  color:#fff; padding-block:clamp(56px,6.5vw,86px); text-align:center;
}
.llamada{ position:relative; overflow:hidden; }
.llamada::before{
  content:""; position:absolute; z-index:0;
  left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(760px, 115%); aspect-ratio:1142/561;
  background:url("../img/logo-gacp-marca.webp") center/contain no-repeat;
  opacity:.05; filter:grayscale(1) brightness(2.4);
  pointer-events:none;
}
.llamada__caja{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; }
.llamada__titulo{
  font-family:var(--display); font-weight:300;
  font-size:clamp(32px,4.6vw,52px); line-height:1.12;
  letter-spacing:-.015em; color:#fff; margin:0 0 16px; text-wrap:balance;
}
.llamada__texto{ margin:0 0 34px; color:var(--claro-suave); font-size:17px; max-width:46ch; }
.llamada__tel{
  margin-top:24px; display:inline-flex; align-items:center; gap:10px;
  padding:12px 20px; border:1px solid rgba(255,255,255,.18); border-radius:var(--radio);
  color:var(--claro-suave); text-decoration:none;
  transition:border-color .22s var(--curva), color .22s var(--curva), background .22s var(--curva);
}
.llamada__tel svg{ width:17px; height:17px; color:var(--oro); }
.llamada__tel span{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--claro-tenue);
}
.llamada__tel strong{ font-weight:500; font-size:15.5px; letter-spacing:.02em; }
.llamada__tel:hover{ border-color:var(--oro); color:#fff; background:rgba(201,162,39,.08); }
.panel__accion.copiado{ border-color:var(--verde); color:#7FE0A6; }
.mas{ min-height:44px; }
.form-resena__salir{ min-height:44px; }

/* ───────────────────────────────────────────────────── PIE */
.pie{ background:var(--tinta-honda); color:var(--claro-suave); }
.pie__caja{
  padding-block:clamp(52px,6vw,72px);
  display:grid; grid-template-columns:1.1fr .95fr .95fr;
  gap:clamp(32px,4vw,56px); align-items:start;
}
.pie .placa{ color:var(--oro-luz); }
.pie__marca{
  background:#fff; padding:20px 22px;
  border:1px solid rgba(201,162,39,.25); max-width:300px;
}
.pie__col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.pie__col a{ color:var(--claro-suave); text-decoration:none; font-size:15px; transition:color .2s var(--curva); }
.pie__col a:hover{ color:var(--oro-luz); }
.pie__horario li{
  display:flex; justify-content:space-between; gap:18px;
  font-size:14.5px; color:var(--claro-tenue);
  padding-bottom:9px; border-bottom:1px solid rgba(255,255,255,.07);
}
.pie__legal{ margin-top:16px !important; padding-top:14px !important; border-top:1px solid rgba(255,255,255,.08); }
.pie__legal a{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--oro-luz) !important; }
.consent{
  display:flex; gap:11px; align-items:flex-start;
  padding:14px 16px; background:#fff; border:1px solid rgba(38,48,61,.42); border-radius:var(--radio);
}
.consent input{ width:20px; height:20px; margin:1px 0 0; flex:0 0 auto; accent-color:var(--oro-hondo); }
.consent label{ font-size:12.5px; line-height:1.6; color:var(--grafito-suave); cursor:pointer; }
.consent a{ color:var(--oro-hondo); }

.aviso{ padding-block:28px 40px; border-top:1px solid rgba(255,255,255,.08); }
.aviso p{ margin:0; font-size:13px; line-height:1.72; color:#8A98A9; max-width:88ch; }
.aviso strong{ color:#94A2B3; font-weight:600; }
.aviso__copy{ margin-top:18px !important; font-family:var(--mono); font-size:11px; letter-spacing:.08em; }

/* ──────────────────────────────────── BOTÓN FLOTANTE MÓVIL */
.flotante{
  position:fixed; z-index:90;
  right:calc(18px + env(safe-area-inset-right));
  bottom:calc(18px + env(safe-area-inset-bottom));
  width:56px; height:56px; border-radius:50%;
  background:var(--verde); color:#fff;
  display:none; align-items:center; justify-content:center;
  box-shadow:0 8px 28px -6px rgba(0,0,0,.45);
  transition:transform .22s var(--curva);
}
.flotante svg{ width:30px; height:30px; }
.flotante:hover{ transform:scale(1.06); }

/* ───────────────────────────────── PANEL DE REQUISITOS */
.panel{
  width:min(820px, calc(100vw - 32px));
  max-width:none; max-height:calc(100vh - 48px);
  padding:0; border:1px solid rgba(201,162,39,.4); border-radius:6px;
  background:var(--papel); color:var(--grafito);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.7);
  overflow:hidden;
}
.panel::backdrop{ background:rgba(5,10,18,.72); backdrop-filter:blur(3px); }
.panel[open]{ display:flex; flex-direction:column; animation:subir .4s var(--curva); }
@keyframes subir{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }

.panel__barra{
  flex:0 0 auto; display:flex; align-items:center; gap:16px;
  padding:14px 20px; background:var(--tinta); color:#fff;
  border-bottom:1px solid rgba(201,162,39,.3);
}
.panel__barra .placa{ margin:0; padding-top:10px; }
.panel__acciones{ margin-left:auto; display:flex; align-items:center; gap:8px; }
.panel__accion{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; background:transparent; border:1px solid rgba(255,255,255,.45);
  color:var(--claro-suave); border-radius:var(--radio);
  padding:8px 14px; font-size:13px; cursor:pointer;
  transition:border-color .2s var(--curva), color .2s var(--curva);
}
.panel__accion svg{ width:16px; height:16px; }
.panel__accion:hover{ border-color:var(--oro); color:#fff; }
.panel__cerrar{
  background:transparent; border:1px solid rgba(255,255,255,.45);
  color:var(--claro-suave); border-radius:var(--radio);
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:border-color .2s var(--curva), color .2s var(--curva);
}
.panel__cerrar svg{ width:17px; height:17px; stroke-width:1.8; }
.panel__cerrar:hover{ border-color:var(--oro); color:#fff; }

.panel__cuerpo:focus-visible{ outline-offset:-4px; }
.panel__cuerpo{
  flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:clamp(28px,4vw,44px);
  padding-bottom:calc(clamp(28px,4vw,44px) + env(safe-area-inset-bottom) + 24px);
}
.panel__cabeza{ text-align:center; padding-bottom:28px; border-bottom:1px solid rgba(38,48,61,.14); }
.panel__logo{ width:190px; margin:0 auto 20px; }
.panel__cabeza h2{
  font-family:var(--display); font-weight:400;
  font-size:clamp(23px,3vw,30px); line-height:1.2;
  color:var(--tinta); margin:0 0 14px; letter-spacing:-.01em;
}
.panel__cabeza p{ margin:0; font-size:15px; line-height:1.7; color:var(--grafito-suave); }

.grupos{ list-style:none; margin:0; padding:0; }
.grupo{ padding:26px 0; border-bottom:1px solid rgba(38,48,61,.12); }
.grupo__cabeza{ display:flex; align-items:baseline; gap:13px; margin-bottom:12px; }
.grupo__num{
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.14em; color:var(--oro-hondo); flex:0 0 auto;
}
.grupo h3{
  font-family:var(--display); font-weight:500; font-size:19px;
  color:var(--tinta); margin:0; letter-spacing:-.005em;
}
.grupo__intro{ margin:0 0 10px 34px; font-size:15px; color:var(--grafito-suave); }
.grupo__puntos{ list-style:none; margin:0; padding:0 0 0 34px; }
.grupo__puntos li{
  position:relative; padding:5px 0 5px 18px;
  font-size:15.5px; line-height:1.6; color:var(--grafito-suave);
}
.grupo__puntos li::before{
  content:""; position:absolute; left:0; top:14px;
  width:5px; height:5px; border-radius:50%; background:var(--oro);
}
.grupo__puntos--columnas{ columns:2; column-gap:30px; }
.grupo__puntos--columnas li{ break-inside:avoid; }

.grupo__ayuda{
  display:flex; gap:12px; align-items:flex-start;
  margin:14px 0 0 34px; padding:14px 16px;
  background:var(--papel-hondo); border-left:2px solid var(--oro); border-radius:0 3px 3px 0;
}
.grupo__ayuda svg{ width:18px; height:18px; color:var(--oro-hondo); flex:0 0 auto; margin-top:3px; }
.grupo__ayuda p{ margin:0 0 7px; font-size:14.5px; line-height:1.6; color:var(--grafito); }
.grupo__ayuda a{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--oro-hondo); text-decoration:none;
  border-bottom:1px solid rgba(201,162,39,.5); padding-bottom:3px;
  transition:color .2s var(--curva), border-color .2s var(--curva);
}
.grupo__ayuda a:hover{ color:var(--tinta); border-color:var(--tinta); }

.panel__pie{ padding-top:26px; }
.panel__pie > p{ margin:0 0 12px; font-size:15px; line-height:1.7; color:var(--grafito-suave); }
.panel__aviso{
  display:flex; gap:13px; align-items:flex-start;
  margin:22px 0 26px; padding:17px 19px;
  background:#FCF6E6; border:1px solid rgba(201,162,39,.45); border-radius:var(--radio);
}
.panel__aviso svg{ width:21px; height:21px; color:var(--oro-hondo); flex:0 0 auto; margin-top:2px; }
.panel__aviso p{ margin:0; font-size:13.5px; line-height:1.65; color:#5E4F22; }
.panel__aviso strong{ color:#463A14; }
.panel__wa{ width:100%; }

/* ──────────────────────────────────────────────── MOVIMIENTO */
.aparece{ opacity:0; transform:translateY(16px); animation:entrar .72s var(--curva) forwards; animation-delay:var(--retraso,0ms); }
@keyframes entrar{ to{ opacity:1; transform:none; } }
.revela{ opacity:0; transform:translateY(18px); transition:opacity .62s var(--curva), transform .62s var(--curva); }
.revela.visible{ opacity:1; transform:none; }

body.cambiando-idioma main,
body.cambiando-idioma .pie__caja{ opacity:.25; transition:opacity .16s linear; }
main,.pie__caja{ transition:opacity .3s var(--curva); }

@media (prefers-reduced-motion:reduce){
  .aparece,.revela{ opacity:1 !important; transform:none !important; animation:none !important; transition:none !important; }
  .wa:hover,.flotante:hover,.boton-oro:hover,.pico:hover{ transform:none; }
  .panel[open]{ animation:none; }
  .barra__caja,.nav a::after,.ficha::before,.boton-oro svg{ transition:none !important; }
  body.cambiando-idioma main{ opacity:1; }
}

/* ──────────────────────────────────────────────── RESPONSIVE */
@media (max-width:1100px){
  .nav{ gap:18px; }
  .nav a{ font-size:13.5px; }
}
@media (max-width:980px){
  .portada__caja{ grid-template-columns:1fr; gap:46px; }
  .retrato{ max-width:420px; }
  .credenciales{ grid-template-columns:repeat(2,1fr); }
  .perfil,.requisitos{ grid-template-columns:1fr; }
  .credencial,.requisitos__indice{ max-width:460px; }
  .pasos{ grid-template-columns:repeat(2,1fr); }
  .pie__caja{ grid-template-columns:1fr 1fr; }
  .pie__marca{ grid-column:1 / -1; }
  .valoracion__acciones{ margin-left:0; width:100%; }
}
@media (max-width:860px){
  .nav{ display:none; }
  /* Carril reservado para que el botón flotante no tape el aviso legal. */
  .aviso{ padding-bottom:calc(40px + 76px + env(safe-area-inset-bottom)); }
  .pie__col ul{ gap:2px; }
  .pie__col li a{ display:flex; align-items:center; min-height:46px; padding:4px 0; }
  .barra__caja{ gap:10px; }
  .menu-boton{ display:flex; margin-left:auto; }
  .nav-movil{ display:flex; }
  .flotante{ display:flex; }
}
@media (max-width:760px){
  .rejilla{ grid-template-columns:1fr; }
  .grupo__puntos--columnas{ columns:1; }
}
@media (max-width:560px){
  body{ font-size:16.5px; }
  .portada__caja{ padding-top:clamp(28px,6vw,56px); }
  .portada__titulo{ font-size:clamp(30px,8.5vw,40px); margin-bottom:18px; }
  .portada__bajada{ margin-bottom:16px; }
  .focos{ margin-bottom:22px; padding-block:11px; }
  .placa{ font-size:10px; letter-spacing:.16em; }
  .portada__nota{ font-size:10.5px; letter-spacing:.07em; }
  .marca__pie,.marca__linea{ display:none; }
  .wa--chica span{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .wa--chica{ padding:0; min-width:46px; min-height:46px; }
  .wa__grande,.fantasma{ width:100%; }
  .portada__acciones{ width:100%; }
  .credenciales{ grid-template-columns:1fr; }
  .credenciales li{ padding:18px 0 0; border-top:1px solid rgba(255,255,255,.07); }
  .credenciales li:first-child{ border-top:0; }
  .pasos{ grid-template-columns:1fr; }
  .pie__caja{ grid-template-columns:1fr; }
  .pie__marca{ max-width:260px; }
  .llamada__caja .wa__grande{ width:100%; }
  .resenas__lista{ grid-template-columns:1fr; }
  .valoracion{ flex-direction:column; align-items:flex-start; }
  .panel{ width:100vw; max-width:100vw; max-height:100vh; height:100vh;
          max-height:100dvh; height:100dvh; border-radius:0; border:0; }
  .panel__accion span{ display:none; }
  .panel__accion{ padding:8px 10px; }
  .form-resena__paso{ flex-direction:column; gap:10px; }
  .picos .pico svg{ width:38px; height:38px; }
}

@media (max-height:520px){
  .panel{
    width:100vw; max-width:100vw; height:100dvh; max-height:100dvh;
    border-radius:0; border:0;
  }
  .panel__logo{ display:none; }
  .panel__cabeza{ padding-bottom:16px; }
  .panel__barra{ padding-block:8px; }
}

/* ───────────────────────────────────────────────── IMPRESIÓN */
@media print{
  body{ background:#fff; }
  body > *:not(.panel){ display:none !important; }
  .panel{
    position:static; display:block !important; width:auto; max-width:none;
    max-height:none; height:auto; border:0; box-shadow:none; overflow:visible;
  }
  .panel__barra{ display:none !important; }
  .panel__cuerpo{ overflow:visible; padding:0; }
  .panel__wa{ display:none !important; }
  .grupo{ break-inside:avoid; }
  .panel__aviso{ background:#fff; border:1px solid #999; }
  a[href]::after{ content:""; }
}

/* ══════════════════════════════════ BOTONES DE SMS Y LLAMADA
   Tres vías de contacto distintas y visibles: WhatsApp, SMS y llamada.
   El de SMS abre el mensajero del teléfono, no WhatsApp: la operadora
   necesita poder comprobar que el cliente inicia el SMS por su cuenta. */
.boton-sms,.boton-tel{
  display:inline-flex; align-items:center; gap:11px;
  min-height:56px; padding:10px 20px; border-radius:var(--radio);
  text-decoration:none; transition:border-color .22s var(--curva),
    background .22s var(--curva), transform .22s var(--curva), color .22s var(--curva);
}
.boton-sms svg,.boton-tel svg{ width:21px; height:21px; flex:0 0 auto; }
.boton-sms span,.boton-tel span{ display:flex; flex-direction:column; line-height:1.25; text-align:left; }
.boton-sms span > span,.boton-tel span > span{
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
}
.boton-sms b,.boton-tel b{ font-weight:600; font-size:15.5px; letter-spacing:.01em; }

.boton-sms{ background:var(--oro); color:var(--tinta); }
.boton-sms:hover{ background:var(--oro-luz); transform:translateY(-2px); }
.boton-tel{ border:1px solid rgba(255,255,255,.45); color:var(--claro-suave); }
.boton-tel svg{ color:var(--oro); }
.boton-tel:hover{ border-color:var(--oro); color:#fff; background:rgba(201,162,39,.08); }

.enlace-sobrio{
  margin-top:16px; align-self:flex-start; min-height:44px;
  background:none; border:0; padding:0; cursor:pointer;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--claro-suave);
  border-bottom:1px solid rgba(255,255,255,.3); transition:color .2s var(--curva), border-color .2s var(--curva);
}
.enlace-sobrio:hover{ color:var(--oro-luz); border-color:var(--oro); }

/* ═══════════════════════════ SECCIÓN DE MENSAJES DE TEXTO */
.bloque--sms{ background:var(--papel-hondo); color:var(--grafito); }
.sms__rejilla{
  display:grid; grid-template-columns:.85fr 1.15fr;
  gap:clamp(28px,4vw,52px); align-items:start;
}
.sms__accion{
  background:var(--tinta); color:var(--claro-suave);
  padding:clamp(26px,3.2vw,34px); border:1px solid rgba(201,162,39,.3);
}
.sms__intro{ margin:0 0 22px; font-size:16px; line-height:1.7; }
.sms__intro strong{ color:#fff; }
.sms__intro a{ color:var(--oro-luz); }
.boton-sms--grande{ width:100%; justify-content:center; min-height:62px; }

.sms__aviso p{ margin:0 0 14px; font-size:15.5px; line-height:1.7; color:var(--grafito-suave); }
.sms__aviso strong{ color:var(--tinta); }
.sms__puntos{ list-style:none; margin:0 0 16px; padding:0; }
.sms__puntos li{
  position:relative; padding:6px 0 6px 20px;
  font-size:15.5px; line-height:1.6; color:var(--grafito-suave);
}
.sms__puntos li::before{
  content:""; position:absolute; left:0; top:15px;
  width:6px; height:6px; border-radius:50%; background:var(--oro);
}
.sms__privado{
  display:flex; gap:11px; align-items:flex-start;
  padding:14px 16px; background:#fff;
  border-left:2px solid var(--oro); font-size:14.5px !important;
}
.sms__privado svg{ width:17px; height:17px; color:var(--oro-hondo); flex:0 0 auto; margin-top:3px; }
.sms__enlaces{ font-size:15px !important; }
.sms__enlaces a{
  color:var(--oro-hondo); font-weight:600;
  border-bottom:1px solid rgba(201,162,39,.5); text-decoration:none;
}
.sms__enlaces a:hover{ color:var(--tinta); border-color:var(--tinta); }

/* ══════════════════════ DESGLOSE DE CALIFICACIONES (estilo Amazon) */
.desglose{ display:flex; flex-direction:column; gap:7px; min-width:230px; flex:1; }
.desglose__fila{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:11px;
  background:none; border:0; padding:3px 0; cursor:pointer; text-align:left;
  font:inherit; color:inherit; border-radius:3px;
  transition:opacity .18s var(--curva);
}
.desglose__fila:hover{ opacity:.72; }
.desglose__fila[aria-pressed="true"] .desglose__n{ color:var(--oro-hondo); font-weight:600; }
.desglose__n{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.06em;
  color:var(--grafito-suave); white-space:nowrap;
}
.desglose__barra{
  height:9px; border-radius:5px; background:rgba(38,48,61,.12); overflow:hidden;
}
.desglose__barra i{
  display:block; height:100%; border-radius:5px;
  background:var(--oro); transform-origin:left;
  animation:crecer .7s var(--curva) both;
}
@keyframes crecer{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
.desglose__pct{
  font-family:var(--mono); font-size:11px; color:var(--grafito-suave);
  min-width:34px; text-align:right;
}
.resenas__filtro{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin:0 0 18px; font-size:14.5px; color:var(--grafito-suave);
}
.resenas__filtro button{
  min-height:38px; padding:5px 14px; cursor:pointer;
  background:none; border:1px solid rgba(38,48,61,.42); border-radius:999px;
  font-size:13.5px; transition:border-color .2s var(--curva), background .2s var(--curva);
}
.resenas__filtro button:hover{ border-color:var(--oro); background:rgba(201,162,39,.08); }

@media (max-width:980px){
  .sms__rejilla{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .boton-sms,.boton-tel{ width:100%; justify-content:center; }
  .portada__acciones{ gap:10px; }
}
@media (prefers-reduced-motion:reduce){
  .desglose__barra i{ animation:none; }
}

/* Una reseña muy larga estiraba toda la fila: se recorta y se abre a petición. */
.resena{ display:flex; flex-direction:column; }
.resena__texto{ position:relative; }
.resena:not(.resena--abierta) .resena__texto{
  display:-webkit-box; -webkit-line-clamp:8; -webkit-box-orient:vertical;
  overflow:hidden;
}
.resena:not(.resena--abierta) .resena__respuesta p:last-child{
  display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical;
  overflow:hidden;
}
.resena__mas{
  align-self:flex-start; margin-top:10px; min-height:38px; padding:0;
  background:none; border:0; cursor:pointer;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--oro-hondo);
  border-bottom:1px solid rgba(201,162,39,.5);
  transition:color .2s var(--curva), border-color .2s var(--curva);
}
.resena__mas:hover{ color:var(--tinta); border-color:var(--tinta); }
.resena__respuesta{ margin-top:auto; }

/* Los botones de contacto muestran los dos números de la empresa. */
.boton-sms span > b + b,.boton-tel span > b + b{
  font-size:14px; opacity:.85; margin-top:1px;
}
.sms__accion .boton-sms--grande + .boton-sms--grande{ margin-top:12px; }

/* ═══════════════════════════ LOS TRES BOTONES DE CONTACTO
   Tres vías distintas, del mismo tamaño y claramente separadas: WhatsApp,
   SMS y llamada. Los números van en una sola línea debajo, para no repetirlos
   cuatro veces y no inflar los botones. */
.contacto{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:12px; max-width:540px;
}
.contacto__btn{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  min-height:78px; padding:14px 10px; border-radius:var(--radio);
  text-decoration:none; text-align:center;
  font-family:var(--mono); font-size:11px; letter-spacing:.11em; text-transform:uppercase;
  transition:transform .22s var(--curva), background .22s var(--curva),
             border-color .22s var(--curva), color .22s var(--curva);
}
.contacto__ico{ width:22px; height:22px; flex:0 0 auto; }
.contacto__btn:hover{ transform:translateY(-2px); }

.contacto__btn--wa{ background:var(--verde); color:#fff; }
.contacto__btn--wa .contacto__ico{ fill:currentColor; stroke:none; }
.contacto__btn--wa:hover{ background:var(--verde-alto); }

.contacto__btn--sms{ background:var(--oro); color:var(--tinta); }
.contacto__btn--sms:hover{ background:var(--oro-luz); }

.contacto__btn--tel{ border:1px solid rgba(255,255,255,.45); color:var(--claro-suave); }
.contacto__btn--tel .contacto__ico{ color:var(--oro); }
.contacto__btn--tel:hover{ border-color:var(--oro); color:#fff; background:rgba(201,162,39,.08); }

.contacto__nums{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin:14px 0 0; max-width:540px;
}
.contacto__nums a{
  min-height:38px; display:inline-flex; align-items:center;
  font-family:var(--mono); font-size:13.5px; letter-spacing:.03em;
  color:var(--claro-suave); text-decoration:none;
  transition:color .2s var(--curva);
}
.contacto__nums a:hover{ color:var(--oro-luz); }
.contacto__nums i{ width:4px; height:4px; border-radius:50%; background:var(--oro); opacity:.7; }

/* Los dos botones de la sección de SMS, uno al lado del otro. */
.sms__botones{ display:grid; grid-template-columns:1fr; gap:10px; }
.sms__botones .boton-sms{ justify-content:center; }

@media (max-width:560px){
  .contacto{ max-width:none; gap:9px; }
  .contacto__btn{ min-height:72px; padding:12px 6px; font-size:10px; letter-spacing:.08em; }
  .contacto__ico{ width:20px; height:20px; }
  .contacto__nums{ gap:10px; }
  .contacto__nums a{ font-size:12.5px; }
}

/* Las barras y los "leer más" quedaban por debajo del mínimo táctil en móvil. */
@media (max-width:860px){
  .desglose__fila{ min-height:44px; padding:8px 0; }
  .resena__mas{ min-height:44px; padding:6px 0; }
  .legal__enlaces a,.pie__col li a,.contacto__nums a{ min-height:44px; }
}