/* ==========================================================================
   OKULARIS · Tarjeta digital
   Mobile-first. Sin medidas rígidas. Paleta del Manual de Marca 2024.
   ========================================================================== */

:root{
  /* Paleta oficial */
  --navy:        #070451;
  --navy-arco:   #141070;   /* navy aclarado, solo arcos decorativos */
  --celeste:     #2496D5;
  --verde:       #24D964;
  --verde-hover: #1BC456;
  --gris-azul:   #9AAAB9;   /* decorativo: no usar en texto pequeño */
  --gris-linea:  #DBE2EA;
  --fondo:       #fff;

  /* Texto (gris azulado oscurecido para cumplir contraste AA) */
  --texto:       #070451;
  --texto-2:     #566A7D;

  --radio:    14px;
  --radio-lg: 22px;
  --ancho:    30rem;        /* 480px: ancho máximo de la tarjeta */
  --gutter:   clamp(1.15rem, 5.5vw, 1.75rem);
  --sombra:   0 6px 24px -10px rgba(7,4,81,.35);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:"Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  color:var(--texto);
  background:var(--gris-linea);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

.sprite{ position:absolute; width:0; height:0; overflow:hidden; }

a{ color:inherit; text-decoration:none; }

:focus-visible{
  outline:3px solid var(--celeste);
  outline-offset:3px;
  border-radius:6px;
}

/* ---------- Contenedor ---------- */
.tarjeta{
  max-width:var(--ancho);
  margin:0 auto;
  background:var(--fondo);
  min-height:100dvh;
  overflow:hidden;
  box-shadow:var(--sombra);
}

/* ---------- Portada ---------- */
.portada{
  position:relative;
  background:var(--navy);
  min-height:clamp(13rem, 50vw, 15.5rem);
  padding:calc(1.75rem + env(safe-area-inset-top)) var(--gutter)
          clamp(6.5rem, 27vw, 7.5rem);

  border-bottom-right-radius:130px;
  overflow:visible;
}

.portada__arcos{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;

  border-bottom-right-radius:130px;
  overflow:hidden;
}

.portada__logo{
  position:relative;
  display:block;
  width:clamp(10.5rem, 54%, 13.5rem);
  height:auto;
}

/* ---------- Avatar: eco del isotipo (ojo + retina) ---------- */
.avatar{
  position:absolute;
  left:var(--gutter);
  bottom:0;
  width:clamp(7rem, 31vw, 8.75rem);
  aspect-ratio:1;
  transform:translateY(38%);
}

.avatar__retina{
  position:absolute;
  inset:-13%;
  width:126%;
  height:126%;
}

.avatar__foto{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
  background:var(--fondo);
  border:5px solid rgb(147 197 253 / .5);
}

/* ---------- Identidad ---------- */
/* El padding superior debe superar lo que el avatar sobresale:
   38% de su alto + 13% del arco de retina. */
.identidad{
  padding:clamp(4rem, 17vw, 5rem) var(--gutter) 0;
}

.identidad h1{
  margin:0;
  font-size:clamp(1.6rem, 7.5vw, 2.1rem);
  font-weight:700;
  letter-spacing:-.025em;
  line-height:1.12;
  font-size: 24px;
}

.identidad__cargo{
  margin:.3rem 0 0;
  font-size:clamp(1rem, 4.2vw, 1.1rem);
  font-weight:500;
  color:var(--celeste);
}

.identidad__empresa{
  display:flex;
  align-items:center;
  gap:.5rem;
  margin:.55rem 0 0;
  font-size:.94rem;
  font-weight:500;
  color:var(--texto-2);
}

.punto{
  width:.5rem;
  height:.5rem;
  border-radius:50%;
  background:var(--verde);
  flex:none;
}

/* ---------- Filas de contacto ---------- */
.contacto{
  margin:clamp(1.5rem, 6vw, 2rem) var(--gutter) 0;
  border-top:1px solid var(--gris-linea);
}

.fila{
  display:flex;
  align-items:center;
  gap:.9rem;
  padding:.85rem 0;
  border-bottom:1px solid var(--gris-linea);
}

.fila__ico{
  flex:none;
  display:grid;
  place-items:center;
  width:2.4rem;
  height:2.4rem;
  border-radius:50%;
  background:var(--gris-linea);
}

.fila__ico svg{
  width:1.15rem;
  height:1.15rem;
  fill:var(--navy);
}

.fila__txt{
  min-width:0;
  font-size:.97rem;
  font-weight:500;
  overflow-wrap:anywhere;
}

.fila__txt small{
  display:block;
  font-size:.74rem;
  font-weight:400;
  color:var(--texto-2);
  letter-spacing:.01em;
}

/* ---------- Botones ---------- */
.btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  width:100%;
  padding:.85rem 1rem;
  border:0;
  border-radius:var(--radio);
  font-family:inherit;
  font-size:.95rem;
  font-weight:500;
  line-height:1.2;
  cursor:pointer;
  transition:background-color .18s, color .18s, transform .12s;
}

.btn svg{
  width:1.15rem;
  height:1.15rem;
  fill:currentColor;
  flex:none;
}

.btn:active{ transform:scale(.975); }

.btn--verde{ background:var(--verde); color:var(--navy); font-weight:700; }
.btn--azul{  background:var(--navy);  color:#fff; }
.btn--linea{ background:transparent;  color:var(--navy); border:1.5px solid var(--gris-linea); }

@media (hover:hover){
  .btn--verde:hover{ background:var(--verde-hover); }
  .btn--azul:hover{  background:#0F0A72; }
  .btn--linea:hover{ border-color:var(--celeste); color:var(--celeste); }
}

/* ---------- Acciones ---------- */
.acciones{
  margin:clamp(1.4rem, 5.5vw, 1.8rem) var(--gutter) 0;
  display:grid;
  gap:.6rem;
}

.acciones__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:.6rem;
}

.acciones__grid .btn{
  flex-direction:column;
  gap:.4rem;
  padding:.8rem .35rem;
  font-size:.78rem;
}

.acciones__grid .btn svg{ width:1.35rem; height:1.35rem; }

.secundarias{
  margin:.6rem var(--gutter) 0;
  display:grid;
  gap:.6rem;
}

/* ---------- Redes ---------- */
.redes{
  display:flex;
  justify-content:center;
  gap:.8rem;
  margin:clamp(1.5rem, 6vw, 2rem) var(--gutter) 0;
}

.redes a{
  display:grid;
  place-items:center;
  width:2.9rem;
  height:2.9rem;
  border-radius:50%;
  background:var(--gris-linea);
  transition:background-color .18s;
}

.redes a svg{ width:1.25rem; height:1.25rem; fill:var(--navy); transition:fill .18s; }

@media (hover:hover){
  .redes a:hover{ background:var(--navy); }
  .redes a:hover svg{ fill:#fff; }
}

/* ---------- Pie ---------- */
.pie{
  margin-top:clamp(2rem, 8vw, 2.75rem);
  padding:1.5rem var(--gutter) calc(1.75rem + env(safe-area-inset-bottom));
  text-align:center;
  border-top:1px solid var(--gris-linea);
}

.pie img{ width:1.9rem; height:auto; opacity:.9; }

.pie p{
  margin:.5rem 0 0;
  font-size:.8rem;
  font-weight:500;
  color:var(--texto-2);
}

.pie__year{ font-weight:400; opacity:.75; }

/* ---------- Hojas (dirección / iOS) ---------- */
.hoja{
  position:fixed;
  inset:0;
  z-index:60;
  display:grid;
  align-items:end;
  justify-items:center;
  background:rgba(7,4,81,.55);
  backdrop-filter:blur(3px);
  opacity:0;
  pointer-events:none;
  transition:opacity .25s;
}

.hoja:target{ opacity:1; pointer-events:auto; }

.hoja__panel{
  position:relative;
  width:100%;
  max-width:var(--ancho);
  background:#fff;
  border-radius:var(--radio-lg) var(--radio-lg) 0 0;
  padding:1.6rem var(--gutter) calc(1.6rem + env(safe-area-inset-bottom));
  transform:translateY(12px);
  transition:transform .25s;
}

.hoja:target .hoja__panel{ transform:translateY(0); }

.hoja__panel h2{
  margin:0 0 .6rem;
  font-size:1.15rem;
  font-weight:700;
}

.hoja__panel p{ margin:0 0 1.1rem; color:var(--texto-2); font-size:.95rem; }

.hoja__cerrar{
  position:absolute;
  top:1rem;
  right:var(--gutter);
  display:grid;
  place-items:center;
  width:2rem;
  height:2rem;
  border-radius:50%;
  background:var(--gris-linea);
}

.hoja__cerrar svg{ width:1rem; height:1rem; fill:var(--navy); }

.pasos{
  margin:0 0 .5rem;
  padding-left:1.15rem;
  color:var(--texto-2);
  font-size:.95rem;
}

.pasos li{ margin-bottom:.55rem; }
.pasos strong{ color:var(--texto); font-weight:700; }

/* ---------- Aviso flotante ---------- */
.aviso{
  position:fixed;
  left:50%;
  bottom:calc(1.25rem + env(safe-area-inset-bottom));
  z-index:80;
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:.7rem 1.1rem;
  border-radius:999px;
  background:var(--navy);
  color:#fff;
  font-size:.88rem;
  font-weight:500;
  transform:translate(-50%, 1rem);
  opacity:0;
  transition:opacity .22s, transform .22s;
}

.aviso[hidden]{ display:none; }
.aviso.visible{ opacity:1; transform:translate(-50%, 0); }
.aviso svg{ width:1.05rem; height:1.05rem; fill:var(--verde); }

/* ---------- Escritorio: la tarjeta se centra, no se estira ---------- */
@media (min-width:33rem){
  body{
    display:grid;
    place-items:center;
    min-height:100dvh;
    padding:2rem 1rem;
    background:var(--navy);
  }
  .tarjeta{
    min-height:0;
    border-radius:var(--radio-lg);
  }
  .hoja{ align-items:center; }
  .hoja__panel{ border-radius:var(--radio-lg); margin:1rem; width:auto; min-width:20rem; }
}

@media (prefers-reduced-motion:reduce){
  *{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
}


.identidad__cargo {
    display: flex;
    align-items: center;
    gap: 4px;
}

.identidad__empresa {
    display: inline;
    margin: 0;
}


.pie__nissi{
    margin-top:.75rem;
    font-size:.7rem;
    color:var(--texto-2);
    opacity:.75;
}

.pie__nissi a{
    font-weight:700;
    color:var(--navy);
}

.pie__nissi a:hover{
    color:var(--celeste);
}