/* Cierre de la pagina: un solo bloque verde de borde a borde.
 *
 * Antes habia dos cajas verdes redondeadas flotando sobre el fondo claro
 * (el CTA y el panel de contacto), con una banda clara en el medio, y el
 * resto de la info del pie abajo sobre el fondo claro. En un monitor ancho
 * quedaban ademas dos franjas vacias a los costados.
 *
 * Ahora el verde ocupa todo el ancho de la pantalla y adentro entra todo:
 * el llamado a la accion, los cuatro contactos, la marca, las secciones y
 * la ubicacion. El texto sigue contenido en la columna de siempre (.wrap),
 * asi que las lineas no se hacen largas de leer en pantallas grandes.
 *
 * El orden de los contactos es el que definio Gabriel y no se cambia:
 *   mail -> reservas -> WhatsApp -> complejo
 *
 * Los estilos del pie viejo viven en el <style> de cada pagina, que carga
 * despues de este archivo. Por eso las reglas de abajo se prefijan con
 * `footer`: gana en especificidad sin tener que editar las 8 paginas.
 */

footer{
  position:relative;overflow:hidden;
  background:var(--olive-deep);
  color:var(--cream);
  padding:clamp(46px, 5.5vw, 68px) 0 22px;
}

/* Un par de luces muy tenues para que el verde no quede plano en pantallas
   grandes, donde ahora ocupa mucha mas superficie. */
footer::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 22% 18%, rgba(181,97,63,.20), transparent 52%),
    radial-gradient(circle at 82% 78%, rgba(255,254,250,.06), transparent 48%);
}
footer > *{position:relative;z-index:1;}

/* Una sola banda: titulo y contactos a la izquierda, las dos columnas a la
   derecha, y la marca de agua grande atras de todo.
   Antes eran cuatro pisos y el pie media 874px, con mucho aire muerto en el
   medio y la marca escrita dos veces — el bloque "Vinas del Mar / Apart & Spa
   en Mar Azul..." decia lo mismo que la silueta que tenia al lado. */
.pie-cuerpo{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:clamp(30px, 5vw, 84px);flex-wrap:wrap;
}
/* 700px es lo que ocupan los cinco contactos en una sola fila (medido: 692
   con Instagram). Si la columna tuviera menos, el quinto bajaba solo a una
   segunda fila; asi, cuando no entra, las columnas de la derecha pasan abajo
   y los contactos quedan juntos. */
.pie-izq{flex:1 1 700px;min-width:0;}
.pie-cols{display:flex;gap:clamp(30px, 5vw, 72px);flex:0 1 auto;}
.pie-cols .foot-col{min-width:0;}
@media(max-width:560px){
  .pie-cols{gap:32px;flex-wrap:wrap;}
}

/* La marca de agua es decorativa: fuera del flujo, detras de todo, oculta a
   los lectores de pantalla y sin respuesta al mouse. Sale del flujo justamente
   para poder ser grande: mientras compartia fila con los contactos, agrandarla
   los empujaba. La opacidad esta en .09 porque por encima de eso el texto de
   las columnas que le queda encima baja del minimo de contraste. */
.pie-marca{
  position:absolute;z-index:0;right:4%;bottom:7%;
  width:min(42%, 560px);opacity:.09;
  pointer-events:none;user-select:none;
}
.pie-marca img{width:100%;height:auto;display:block;}
/* En el celular entra entera igual: cortada a mitad de palabra ("Vinas del
   Ma") se lee como un error, no como textura. */
@media(max-width:760px){
  .pie-marca{width:min(74%, 340px);right:5%;bottom:auto;top:52%;opacity:.07;}
}

/* ---- llamado a la accion (solo en la home) ---- */
.pie-cta{text-align:center;max-width:640px;margin:0 auto clamp(46px, 6vw, 72px);}
.pie-cta h2{
  font-family:'Fraunces',serif;font-weight:400;letter-spacing:-.02em;
  font-size:clamp(30px, 5vw, 50px);line-height:1.06;text-wrap:balance;
}
.pie-cta h2 em{font-style:italic;color:#E8C9AF;}
.pie-cta p{
  margin-top:16px;font-size:15.5px;line-height:1.6;
  color:rgba(255,254,250,.82);max-width:46ch;margin-left:auto;margin-right:auto;
}
.pie-cta .cta-buttons{margin-top:32px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}

/* ---- cabecera de contacto (en las paginas internas) ---- */
.pie-cab{margin-bottom:clamp(24px, 3vw, 34px);}
.pie-cab h3{
  font-family:'Fraunces',serif;font-weight:500;letter-spacing:-.02em;
  font-size:clamp(21px, 2.6vw, 30px);line-height:1.15;
}
.pie-cab p{
  margin-top:9px;font-size:14px;line-height:1.6;max-width:42ch;
  color:rgba(255,254,250,.76);
}

/* ---- los cuatro contactos ---- */
.dock{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;}
.dock-item{
  display:flex;flex-direction:column;align-items:center;gap:9px;
  min-width:64px;padding:8px 4px;border-radius:14px;
  transition:transform .18s var(--ease);
  will-change:transform;
}
.dock-circ{
  width:54px;height:54px;border-radius:50%;flex:none;
  background:rgba(255,254,250,.10);
  border:1px solid rgba(255,254,250,.18);
  display:grid;place-items:center;color:var(--cream);
  transition:background .25s var(--ease), border-color .25s var(--ease);
}
.dock-item:hover .dock-circ,
.dock-item:focus-visible .dock-circ{
  background:var(--terracotta);border-color:var(--terracotta);
}
.dock-item:focus-visible{outline:2px solid var(--cream);outline-offset:3px;}
/* Instagram: al pasar el mouse el circulo toma los colores de la marca, asi
   se reconoce sin leer. Va despues de la regla general para ganarle. */
.dock-ig:hover .dock-circ,
.dock-ig:focus-visible .dock-circ{
  background:radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 6%, #fd5949 45%, #d6249f 62%, #285aeb 92%);
  border-color:transparent;
}
.dock-circ svg{width:22px;height:22px;}
.dock-rot{
  font-family:'JetBrains Mono',monospace;
  font-size:10px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:rgba(255,254,250,.74);text-align:center;line-height:1.35;white-space:nowrap;
}
.dock-item:hover .dock-rot{color:var(--cream);}
.dock-dato{
  font-size:12.5px;color:rgba(255,254,250,.94);text-align:center;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}

/* ---- columnas y copyright, sobre el verde ---- */
footer .foot-col h3{color:rgba(255,254,250,.66);margin-bottom:12px;}
/* El min-height:44px viene del <style> de cada pagina y NO se pisa: es el
   area tactil minima que fijo la auditoria. La columna queda alta por eso. */
footer .foot-col a{color:rgba(255,254,250,.9);}
footer .foot-col a:hover{color:#E8C9AF;}
footer .foot-col p{color:rgba(255,254,250,.82);}
footer .foot-bottom{
  margin-top:clamp(36px, 4.5vw, 56px);
  border-top:1px solid rgba(255,254,250,.14);
  color:rgba(255,254,250,.66);
}

/* En pantalla tactil no hay cursor que seguir: se apaga el efecto y los
   contactos se reparten en dos columnas comodas. */
@media(hover:none){
  .dock-item{transform:none !important;min-height:44px;}
}
/* En tablet angosta o celular acostado no entran los cinco en fila: van tres
   y dos, repartidos, en vez de cuatro y uno suelto. */
@media(min-width:561px) and (max-width:760px){
  .dock-item{min-width:0;flex:1 1 calc(33.333% - 10px);}
}
@media(max-width:560px){
  .dock{gap:8px;}
  .dock-item{min-width:0;flex:1 1 calc(50% - 8px);}
  .dock-dato{font-size:11.5px;}
}
@media(prefers-reduced-motion:reduce){
  .dock-item{transition:none !important;}
}