/* ============================================================
   P+A ARQUITECTOS  ·  hoja de estilo principal
   Paleta: piedra caliza, tinta profunda, latón cálido
   Tipografía: Cormorant Garamond (display) + Inter (texto)
   ============================================================ */

:root{
  /* --- color --- */
  --tinta:        #1a1a18;
  --tinta-suave:  #2e2e2a;
  --piedra:       #f4f1ec;
  --piedra-hondo: #e8e3da;
  --arena:        #d6cec0;
  --laton:        #a8865a;
  --laton-claro:  #c9a876;
  --gris-texto:   #5c5a54;
  --blanco:       #ffffff;

  /* --- tipografía --- */
  --display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --texto:   "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;

  /* --- ritmo --- */
  --ancho:   1240px;
  --angosto: 760px;
  --aire:    clamp(4rem, 9vw, 8.5rem);

  /* --- movimiento --- */
  --curva: cubic-bezier(.22,.61,.36,1);
}

/* ===================== RESET ===================== */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

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

body{
  font-family:var(--texto);
  font-size:clamp(1rem, .95rem + .2vw, 1.0625rem);
  line-height:1.7;
  color:var(--tinta);
  background:var(--piedra);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }

::selection{ background:var(--laton); color:var(--blanco); }

/* ===================== TIPOGRAFÍA ===================== */
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:300;
  line-height:1.08;
  letter-spacing:-.015em;
}

h1{ font-size:clamp(2.6rem, 6.5vw, 5.2rem); }
h2{ font-size:clamp(2rem, 4vw, 3.4rem); }
h3{ font-size:clamp(1.35rem, 2vw, 1.75rem); font-weight:400; }

.eyebrow{
  font-family:var(--texto);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--laton);
  display:block;
  margin-bottom:1.1rem;
}

.entrada{
  font-family:var(--display);
  font-size:clamp(1.25rem, 2.2vw, 1.6rem);
  font-style:italic;
  font-weight:300;
  line-height:1.5;
  color:var(--tinta-suave);
}

/* ===================== LAYOUT ===================== */
.envoltura{
  width:min(100% - 2.5rem, var(--ancho));
  margin-inline:auto;
}

.seccion{ padding-block:var(--aire); }

.seccion--honda{ background:var(--tinta); color:var(--piedra); }
.seccion--honda .eyebrow{ color:var(--laton-claro); }
.seccion--arena{ background:var(--piedra-hondo); }

/* ===================== NAVEGACIÓN ===================== */
.nav{
  position:fixed;
  inset:0 0 auto 0;
  z-index:100;
  padding-block:1.35rem;
  transition:background .4s var(--curva), padding .4s var(--curva), box-shadow .4s var(--curva);
}

.nav__interior{
  width:min(100% - 2.5rem, var(--ancho));
  margin-inline:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
}

.nav__logo{
  font-family:var(--display);
  font-size:1.5rem;
  font-weight:400;
  letter-spacing:.06em;
  color:var(--blanco);
  transition:color .4s var(--curva);
  white-space:nowrap;
}
.nav__logo span{ color:var(--laton-claro); }

.nav__menu{
  display:flex;
  align-items:center;
  gap:2.2rem;
  list-style:none;
}

.nav__menu a{
  font-size:.78rem;
  font-weight:400;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,.86);
  position:relative;
  padding-block:.35rem;
  transition:color .3s var(--curva);
}

.nav__menu a::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:0; height:1px;
  background:var(--laton-claro);
  transition:width .35s var(--curva);
}
.nav__menu a:hover::after,
.nav__menu a:focus-visible::after{ width:100%; }
.nav__menu a:hover{ color:var(--blanco); }

/* estado al hacer scroll */
.nav.pegado{
  background:rgba(244,241,236,.94);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  padding-block:.85rem;
  box-shadow:0 1px 0 rgba(26,26,24,.08);
}
.nav.pegado .nav__logo{ color:var(--tinta); }
.nav.pegado .nav__logo span{ color:var(--laton); }
.nav.pegado .nav__menu a{ color:var(--gris-texto); }
.nav.pegado .nav__menu a:hover{ color:var(--tinta); }
.nav.pegado .nav__menu a::after{ background:var(--laton); }

/* botón hamburguesa */
.nav__toggle{
  display:none;
  width:44px; height:44px;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:6px;
  margin-right:-10px;
}
.nav__toggle span{
  display:block;
  width:24px; height:1.5px;
  background:var(--blanco);
  transition:transform .35s var(--curva), opacity .25s var(--curva), background .35s var(--curva);
}
.nav.pegado .nav__toggle span{ background:var(--tinta); }
.nav__toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

/* ===================== PORTADA ===================== */
.portada{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:flex-end;
  padding-block:9rem 5rem;
  background:var(--tinta);
  overflow:hidden;
  isolation:isolate;
}

.portada__fondo{
  position:absolute;
  inset:0;
  z-index:-2;
}
.portada__fondo img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 60%;
  animation:respira 22s var(--curva) infinite alternate;
}

@keyframes respira{
  from{ transform:scale(1.02); }
  to  { transform:scale(1.11); }
}

.portada::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(to top, rgba(15,15,13,.94) 0%, rgba(15,15,13,.62) 42%, rgba(15,15,13,.34) 72%, rgba(15,15,13,.55) 100%);
}

.portada__contenido{
  width:min(100% - 2.5rem, var(--ancho));
  margin-inline:auto;
  color:var(--blanco);
  max-width:var(--ancho);
}

.portada__marca{
  font-family:var(--display);
  font-size:clamp(3.2rem, 9vw, 7rem);
  font-weight:300;
  line-height:.92;
  letter-spacing:-.03em;
  margin-bottom:1.6rem;
}
.portada__marca em{
  font-style:normal;
  color:var(--laton-claro);
}

.portada__lema{
  font-family:var(--display);
  font-size:clamp(1.15rem, 2.4vw, 1.75rem);
  font-style:italic;
  font-weight:300;
  line-height:1.45;
  max-width:38ch;
  color:rgba(255,255,255,.9);
  margin-bottom:2.6rem;
}

.portada__datos{
  display:flex;
  flex-wrap:wrap;
  gap:.9rem 2.6rem;
  padding-top:1.8rem;
  border-top:1px solid rgba(255,255,255,.18);
  font-size:.75rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(255,255,255,.62);
}
.portada__datos b{
  color:var(--laton-claro);
  font-weight:500;
}

/* indicador de scroll */
.portada__baja{
  position:absolute;
  bottom:1.8rem;
  right:max(1.25rem, calc((100vw - var(--ancho))/2));
  display:flex;
  align-items:center;
  gap:.75rem;
  font-size:.68rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:rgba(255,255,255,.5);
  z-index:2;
}
.portada__baja i{
  display:block;
  width:1px; height:52px;
  background:linear-gradient(to bottom, var(--laton-claro), transparent);
  animation:late 2.2s var(--curva) infinite;
}
@keyframes late{
  0%,100%{ transform:scaleY(.35); transform-origin:top; opacity:.4; }
  50%    { transform:scaleY(1);   transform-origin:top; opacity:1; }
}

/* ===================== BOTONES ===================== */
.boton{
  display:inline-flex;
  align-items:center;
  gap:.8rem;
  padding:1rem 2.1rem;
  font-size:.75rem;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  border:1px solid var(--laton);
  color:var(--laton-claro);
  background:transparent;
  transition:background .35s var(--curva), color .35s var(--curva), border-color .35s var(--curva);
}
.boton:hover,
.boton:focus-visible{
  background:var(--laton);
  color:var(--blanco);
  border-color:var(--laton);
}
.boton--solido{
  background:var(--laton);
  color:var(--blanco);
}
.boton--solido:hover{
  background:var(--tinta);
  border-color:var(--tinta);
}
.boton--tinta{
  border-color:var(--tinta);
  color:var(--tinta);
}
.boton--tinta:hover{
  background:var(--tinta);
  color:var(--piedra);
}

/* ===================== FILOSOFÍA ===================== */
.filosofia{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(2.5rem, 6vw, 6rem);
  align-items:start;
}

.filosofia__titulo h2{ max-width:14ch; }

.filosofia__cuerpo p + p{ margin-top:1.4rem; }
.filosofia__cuerpo p{ color:var(--gris-texto); max-width:56ch; }

.filosofia__cita{
  margin-top:2.6rem;
  padding-left:1.6rem;
  border-left:2px solid var(--laton);
  font-family:var(--display);
  font-size:clamp(1.2rem, 2vw, 1.5rem);
  font-style:italic;
  font-weight:300;
  line-height:1.45;
  color:var(--tinta);
}

/* ===================== CIFRAS ===================== */
.cifras{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:2.5rem 2rem;
  margin-top:clamp(3rem, 6vw, 5rem);
  padding-top:clamp(2.5rem, 5vw, 4rem);
  border-top:1px solid rgba(255,255,255,.14);
}

.cifra__num{
  font-family:var(--display);
  font-size:clamp(2.6rem, 5vw, 4rem);
  font-weight:300;
  line-height:1;
  color:var(--laton-claro);
  display:block;
  margin-bottom:.6rem;
}
.cifra__txt{
  font-size:.74rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(244,241,236,.62);
  line-height:1.6;
}

/* ===================== PROYECTOS ===================== */
.proyectos__cabecera{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:2rem;
  flex-wrap:wrap;
  margin-bottom:clamp(2.5rem, 5vw, 4rem);
}
.proyectos__cabecera h2{ max-width:16ch; }
.proyectos__cabecera p{
  max-width:40ch;
  color:var(--gris-texto);
  font-size:.95rem;
}

/* filtros */
.filtros{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  margin-bottom:2.6rem;
}
.filtro{
  padding:.55rem 1.25rem;
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  border:1px solid var(--arena);
  color:var(--gris-texto);
  transition:all .3s var(--curva);
}
.filtro:hover{ border-color:var(--laton); color:var(--tinta); }
.filtro[aria-pressed="true"]{
  background:var(--tinta);
  border-color:var(--tinta);
  color:var(--piedra);
}

/* rejilla */
.rejilla{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap:clamp(1.5rem, 3vw, 2.6rem);
}

.tarjeta{
  position:relative;
  display:block;
  background:var(--blanco);
  overflow:hidden;
  transition:transform .5s var(--curva), box-shadow .5s var(--curva);
  text-align:left;
  width:100%;
}
.tarjeta:hover,
.tarjeta:focus-visible{
  transform:translateY(-6px);
  box-shadow:0 24px 48px -20px rgba(26,26,24,.32);
  outline:none;
}

.tarjeta__marco{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  background:var(--arena);
}
.tarjeta__marco img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .8s var(--curva), filter .5s var(--curva);
}
.tarjeta:hover .tarjeta__marco img{ transform:scale(1.06); }

.tarjeta__velo{
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(15,15,13,.72) 0%, rgba(15,15,13,.08) 55%, transparent 100%);
  opacity:0;
  transition:opacity .45s var(--curva);
  display:flex;
  align-items:flex-end;
  padding:1.4rem;
}
.tarjeta:hover .tarjeta__velo,
.tarjeta:focus-visible .tarjeta__velo{ opacity:1; }
.tarjeta__velo span{
  font-size:.7rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--blanco);
  display:inline-flex;
  align-items:center;
  gap:.6rem;
}
.tarjeta__velo span::after{
  content:"";
  width:22px; height:1px;
  background:var(--laton-claro);
}

.tarjeta__pie{
  padding:1.35rem 1.5rem 1.5rem;
  border-top:1px solid var(--piedra-hondo);
}
.tarjeta__nom{
  font-family:var(--display);
  font-size:1.4rem;
  font-weight:400;
  line-height:1.2;
  margin-bottom:.35rem;
}
.tarjeta__meta{
  font-size:.7rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gris-texto);
}

.tarjeta.oculta{ display:none; }

/* ===================== SERVICIOS ===================== */
.servicios{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap:clamp(2rem, 4vw, 3.2rem);
  margin-top:clamp(2.5rem, 5vw, 4rem);
}

.servicio{
  padding-top:1.8rem;
  border-top:1px solid rgba(255,255,255,.16);
}
.servicio__num{
  font-family:var(--display);
  font-size:.95rem;
  color:var(--laton-claro);
  letter-spacing:.1em;
  display:block;
  margin-bottom:1rem;
}
.servicio h3{
  color:var(--piedra);
  margin-bottom:.9rem;
}
.servicio p{
  font-size:.93rem;
  line-height:1.75;
  color:rgba(244,241,236,.66);
}

/* ===================== NOSOTROS ===================== */
.nosotros{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap:clamp(2.5rem, 5vw, 4.5rem);
  align-items:start;
}
.nosotros__intro h2{ max-width:13ch; margin-bottom:1.6rem; }
.nosotros__intro p{ color:var(--gris-texto); max-width:52ch; }
.nosotros__intro p + p{ margin-top:1.2rem; }

.socios{
  display:grid;
  gap:2rem;
}
.socio{
  padding:2rem;
  background:var(--blanco);
  border-left:2px solid var(--laton);
}
.socio__inicial{
  font-family:var(--display);
  font-size:2.6rem;
  font-weight:300;
  line-height:1;
  color:var(--laton);
  display:block;
  margin-bottom:.9rem;
}
.socio h3{ margin-bottom:.4rem; }
.socio p{
  font-size:.88rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--gris-texto);
}

/* ===================== CONTACTO ===================== */
.contacto{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2.5rem, 6vw, 5.5rem);
  align-items:start;
}
.contacto__texto h2{ max-width:12ch; margin-bottom:1.5rem; }
.contacto__texto p{
  color:rgba(244,241,236,.7);
  max-width:44ch;
  margin-bottom:2.4rem;
}
.contacto__lista{
  list-style:none;
  display:grid;
  gap:1.4rem;
}
.contacto__lista li{
  display:grid;
  gap:.3rem;
}
.contacto__lista dt,
.contacto__lista .rotulo{
  font-size:.68rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--laton-claro);
}
.contacto__lista a,
.contacto__lista .valor{
  font-size:1.05rem;
  color:var(--piedra);
  transition:color .3s var(--curva);
}
.contacto__lista a:hover{ color:var(--laton-claro); }

/* formulario */
.form{
  display:grid;
  gap:1.4rem;
}
.campo{
  display:grid;
  gap:.5rem;
}
.campo label{
  font-size:.68rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(244,241,236,.55);
}
.campo input,
.campo textarea{
  width:100%;
  padding:.9rem 0;
  font:inherit;
  font-size:.98rem;
  color:var(--piedra);
  background:transparent;
  border:none;
  border-bottom:1px solid rgba(255,255,255,.22);
  transition:border-color .3s var(--curva);
}
.campo textarea{ resize:vertical; min-height:110px; }
.campo input:focus,
.campo textarea:focus{
  outline:none;
  border-bottom-color:var(--laton-claro);
}
.campo input::placeholder,
.campo textarea::placeholder{ color:rgba(244,241,236,.3); }

.form__nota{
  font-size:.78rem;
  color:rgba(244,241,236,.45);
  line-height:1.6;
}
.form__aviso{
  font-size:.85rem;
  color:var(--laton-claro);
  min-height:1.3em;
}

/* ===================== PIE ===================== */
.pie{
  background:#111110;
  color:rgba(244,241,236,.55);
  padding-block:3.5rem 2.5rem;
  font-size:.82rem;
}
.pie__arriba{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:2.5rem;
  flex-wrap:wrap;
  padding-bottom:2.5rem;
  border-bottom:1px solid rgba(255,255,255,.09);
}
.pie__marca{
  font-family:var(--display);
  font-size:1.6rem;
  font-weight:400;
  letter-spacing:.06em;
  color:var(--piedra);
  margin-bottom:.6rem;
}
.pie__marca span{ color:var(--laton-claro); }
.pie__lema{
  font-family:var(--display);
  font-style:italic;
  font-size:1rem;
  color:rgba(244,241,236,.45);
  max-width:34ch;
}
.pie__nav{
  display:flex;
  gap:2rem;
  flex-wrap:wrap;
  list-style:none;
}
.pie__nav a{
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  transition:color .3s var(--curva);
}
.pie__nav a:hover{ color:var(--laton-claro); }
.pie__abajo{
  display:flex;
  justify-content:space-between;
  gap:1.5rem;
  flex-wrap:wrap;
  padding-top:1.8rem;
  font-size:.72rem;
  letter-spacing:.06em;
  color:rgba(244,241,236,.35);
}

/* ===================== MODAL DEL PROYECTO ===================== */
.modal{
  position:fixed;
  inset:0;
  z-index:200;
  display:none;
  align-items:center;
  justify-content:center;
  padding:1.5rem;
}
.modal.abierto{ display:flex; }

.modal__fondo{
  position:absolute;
  inset:0;
  background:rgba(12,12,11,.9);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  animation:fundido .3s var(--curva);
}
@keyframes fundido{ from{ opacity:0; } to{ opacity:1; } }

.modal__caja{
  position:relative;
  width:min(100%, 980px);
  max-height:90svh;
  overflow-y:auto;
  background:var(--piedra);
  animation:sube .45s var(--curva);
}
@keyframes sube{
  from{ opacity:0; transform:translateY(24px); }
  to  { opacity:1; transform:translateY(0); }
}

.modal__cerrar{
  position:absolute;
  top:1rem; right:1rem;
  z-index:3;
  width:44px; height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(26,26,24,.82);
  color:var(--piedra);
  font-size:1.4rem;
  line-height:1;
  border-radius:50%;
  transition:background .3s var(--curva), transform .3s var(--curva);
}
.modal__cerrar:hover{ background:var(--laton); transform:rotate(90deg); }

.modal__foto{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  background:var(--arena);
}

.modal__cuerpo{ padding:clamp(1.6rem, 4vw, 2.8rem); }
.modal__cuerpo h3{
  font-size:clamp(1.8rem, 3.4vw, 2.6rem);
  margin-bottom:.5rem;
}
.modal__meta{
  font-size:.7rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--laton);
  margin-bottom:1.8rem;
}
.modal__planos{
  display:grid;
  gap:.7rem;
  margin-top:1.6rem;
}
.modal__planos .rotulo{
  font-size:.68rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gris-texto);
  margin-bottom:.3rem;
  display:block;
}
.plano{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1rem 1.3rem;
  background:var(--blanco);
  border:1px solid var(--piedra-hondo);
  font-size:.9rem;
  transition:border-color .3s var(--curva), background .3s var(--curva);
}
.plano:hover{
  border-color:var(--laton);
  background:#fdfcfa;
}
.plano__nom{ font-weight:500; }
.plano__acc{
  font-size:.68rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--laton);
  white-space:nowrap;
}

/* ===================== ANIMACIÓN DE ENTRADA ===================== */
/* REGLA DURA: el contenido SIEMPRE es visible. La animación es solo un adorno
   que se activa únicamente si el JS confirma que puede observarlo. */
.revela{
  opacity:1;
  transform:none;
}

/* Solo cuando el JS marca el documento como listo, se permite esconder */
html.js-anim .revela{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s var(--curva), transform .7s var(--curva);
}
html.js-anim .revela.visible{
  opacity:1;
  transform:none;
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .revela{ opacity:1; transform:none; }
}

/* ===================== RESPONSIVO ===================== */
@media (max-width: 900px){
  .filosofia,
  .contacto{ grid-template-columns:1fr; }

  .nav__toggle{ display:flex; }

  .nav__menu{
    position:fixed;
    inset:0 0 auto 0;
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    padding:6rem 1.6rem 2.5rem;
    background:rgba(20,20,18,.98);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    transform:translateY(-100%);
    transition:transform .45s var(--curva);
    box-shadow:0 20px 40px -20px rgba(0,0,0,.6);
  }
  .nav__menu.abierto{ transform:translateY(0); }
  .nav__menu li{ width:100%; }
  .nav__menu a{
    display:block;
    width:100%;
    padding:1.15rem 0;
    font-size:.92rem;
    letter-spacing:.14em;
    color:rgba(255,255,255,.9);
    border-bottom:1px solid rgba(255,255,255,.1);
  }
  .nav__menu a::after{ display:none; }

  .portada{ padding-block:8rem 6rem; }
  .portada__baja{ display:none; }

  .proyectos__cabecera{ flex-direction:column; align-items:flex-start; }
  .pie__arriba{ flex-direction:column; }
}

@media (max-width: 560px){
  .envoltura,
  .nav__interior,
  .portada__contenido{ width:calc(100% - 2rem); }

  .portada__datos{
    flex-direction:column;
    gap:.55rem;
    font-size:.68rem;
  }
  .rejilla{ grid-template-columns:1fr; }
  .socio{ padding:1.5rem; }
  .modal{ padding:.75rem; }
  .modal__caja{ max-height:94svh; }
}