/* ==========================================================================
   Devincenzi & Luizzi - Contadores
   Hoja de estilos unica del sitio.

   Las imagenes se referencian con rutas RELATIVAS a este archivo:
   estando en /assets/css/, "../img/" apunta a /assets/img/.

   Es a proposito. El CSS no puede ejecutar PHP, asi que no puede usar la
   funcion u() que hace portables las direcciones en el resto del sitio.
   Con rutas relativas funciona igual en la raiz del dominio que dentro de
   una subcarpeta. No poner "/assets/img/..." aca.
   ========================================================================== */

:root {
	--azul:        #16283d;
	--azul-claro:  #1f3855;
	--acento:      #b0894f;
	--acento-sua:  #f0e7d8;
	--texto:       #22303d;
	--tenue:       #5d6b7a;
	--linea:       #dde3e9;
	--fondo:       #ffffff;
	--fondo-alt:   #f4f6f8;
	--ancho:       1120px;
	--radio:       4px;
}

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

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

body {
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
	             "Helvetica Neue", Arial, sans-serif;
	font-size: 17px;
	line-height: 1.65;
	color: var(--texto);
	background: var(--fondo);
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--azul); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--acento); }

h1, h2, h3 { line-height: 1.25; margin: 0 0 .6em; font-weight: 600; color: var(--azul); }
h1 { font-size: 2.15rem; letter-spacing: -.01em; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.15rem; }
p  { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 24px; }

.saltar {
	position: absolute; left: -9999px;
	background: var(--azul); color: #fff; padding: 10px 16px; z-index: 100;
}
.saltar:focus { left: 8px; top: 8px; }

/* ---------- Cabecera ---------------------------------------------------- */

.cabecera {
	background: var(--azul);
	position: sticky; top: 0; z-index: 50;
	border-bottom: 3px solid var(--acento);
}
.cabecera-fila {
	display: flex; align-items: center; justify-content: space-between;
	gap: 16px; min-height: 78px;
}

.marca { text-decoration: none; display: block; padding: 14px 0; }
.marca img { width: 230px; height: auto; }

/* Alternativa por si algun dia se usa texto en vez del logo */
.marca-nombre {
	display: block; color: #fff; font-size: 1.28rem;
	font-weight: 600; letter-spacing: .01em;
}
.marca-bajada {
	display: block; color: rgba(255,255,255,.7);
	font-size: .74rem; text-transform: uppercase; letter-spacing: .13em;
}

.menu ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.menu a {
	display: block; padding: 10px 14px; color: rgba(255,255,255,.88);
	text-decoration: none; font-size: .93rem; border-radius: var(--radio);
}
.menu a:hover { background: rgba(255,255,255,.09); color: #fff; }
.menu a[aria-current="page"] { color: var(--acento); font-weight: 600; }

.menu-boton {
	display: none; background: none; border: 1px solid rgba(255,255,255,.35);
	border-radius: var(--radio); padding: 10px 11px; cursor: pointer;
}
.menu-boton span {
	display: block; width: 22px; height: 2px; background: #fff; border-radius: 2px;
}
.menu-boton span + span { margin-top: 5px; }

/* ---------- Portada ----------------------------------------------------- */

/* Portada sobre la foto de la lapicera, la misma que usaba el sitio anterior.
   El degradado va de casi opaco a la izquierda, donde esta el texto, a mas
   transparente a la derecha, que es donde se ve la lapicera. */
.portada {
	position: relative; overflow: hidden;
	color: #fff; padding: 96px 0 88px;
	background-color: var(--azul);
	background-image:
		linear-gradient(100deg,
			rgba(18, 33, 51, .96) 0%,
			rgba(19, 35, 54, .93) 30%,
			rgba(24, 44, 68, .78) 52%,
			rgba(28, 51, 78, .52) 76%,
			rgba(33, 60, 91, .38) 100%),
		url('../img/portada.jpg');
	background-size: cover;
	background-position: center right;
	background-repeat: no-repeat;
}
.portada > .contenedor { position: relative; z-index: 1; }
.portada h1 { color: #fff; max-width: 20ch; font-size: 2.55rem; }
.portada .bajada {
	font-size: 1.12rem; color: rgba(255,255,255,.86);
	max-width: 58ch; margin-bottom: 1.8em;
}
.portada-datos {
	margin-top: 40px; padding-top: 26px;
	border-top: 1px solid rgba(255,255,255,.16);
	color: rgba(255,255,255,.72); font-size: .93rem;
}

/* Encabezado de las paginas interiores: la misma foto que la portada, en una
   banda mas baja y con otro encuadre, para que no parezcan la misma imagen. */
.encabezado {
	position: relative;
	padding: 56px 0 50px;
	color: #fff;
	background-color: var(--azul);
	background-image:
		linear-gradient(100deg,
			rgba(18, 33, 51, .96) 0%,
			rgba(19, 35, 54, .93) 32%,
			rgba(23, 42, 65, .82) 50%,
			rgba(27, 49, 75, .58) 74%,
			rgba(32, 58, 88, .36) 100%),
		url('../img/banda.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.encabezado h1 { color: #fff; margin-bottom: .3em; }
.encabezado .bajada {
	color: rgba(255,255,255,.85); max-width: 62ch; font-size: 1.05rem; margin: 0;
}

.miga { font-size: .84rem; color: var(--tenue); margin: 0 0 14px; }
.miga a { color: var(--tenue); }
.encabezado .miga { color: rgba(255,255,255,.74); }
.encabezado .miga a { color: rgba(255,255,255,.80); }
.encabezado .miga a:hover { color: var(--acento); }

/* ---------- Iconos ------------------------------------------------------ */

.icono { width: 28px; height: 28px; display: block; color: var(--acento); }

.icono-caja {
	width: 54px; height: 54px; border-radius: 50%;
	background: var(--acento-sua); color: var(--acento);
	display: flex; align-items: center; justify-content: center;
	margin-bottom: 18px; flex: 0 0 auto;
}
.tarjeta-enlace:hover .icono-caja { background: var(--acento); color: #fff; }

.icono-linea { display: flex; align-items: flex-start; gap: 14px; }
.icono-linea .icono { color: var(--acento); margin-top: 2px; }

/* ---------- Franja de datos --------------------------------------------- */

.franja {
	background: var(--fondo-alt);
	border-bottom: 1px solid var(--linea);
	padding: 34px 0;
}
.franja-grilla {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px;
	text-align: center;
}
.franja-dato { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.franja-dato .icono { width: 26px; height: 26px; }
.franja-cifra {
	font-size: 1.5rem; font-weight: 600; color: var(--azul); line-height: 1.1;
}
.franja-texto { font-size: .86rem; color: var(--tenue); margin: 0; }

/* ---------- Imagenes y marcadores de foto -------------------------------- */

.figura {
	border-radius: var(--radio); overflow: hidden;
	border: 1px solid var(--linea); line-height: 0;
}
.figura img { width: 100%; height: 100%; object-fit: cover; }

/* Marcador: se ve prolijo mientras no haya foto real cargada */
.foto-pendiente {
	background:
		repeating-linear-gradient(135deg,
			rgba(22,40,61,.045) 0 12px, rgba(22,40,61,.02) 12px 24px),
		var(--fondo-alt);
	border: 1px dashed #c3ccd6;
	border-radius: var(--radio);
	min-height: 240px;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 10px; text-align: center; padding: 26px;
	color: var(--tenue);
}
.foto-pendiente .icono { width: 34px; height: 34px; color: #9fadbb; }
.foto-pendiente strong { color: var(--azul); font-size: .95rem; font-weight: 600; }
.foto-pendiente span { font-size: .82rem; max-width: 30ch; line-height: 1.45; }

.bloque-mixto {
	display: grid; grid-template-columns: 1.15fr 1fr; gap: 44px; align-items: center;
}

/* Recuadro lateral: se usa para acompanar un bloque de texto con una lista */
.recuadro {
	background: var(--fondo-alt);
	border: 1px solid var(--linea);
	border-top: 3px solid var(--acento);
	border-radius: var(--radio);
	padding: 28px 26px 24px;
}
.recuadro h3 { font-size: 1.05rem; margin-bottom: .9em; }
.recuadro .lista-marcada li { font-size: .95rem; margin-bottom: .5em; }
.recuadro-pie {
	margin-top: 1.2em; padding-top: 1em;
	border-top: 1px solid var(--linea);
	font-size: .88rem; color: var(--tenue);
}

/* ---------- Secciones --------------------------------------------------- */

.seccion { padding: 64px 0; }
.seccion-alt { background: var(--fondo-alt); border-block: 1px solid var(--linea); }
.seccion > .contenedor > h2:first-child { margin-bottom: 1em; }

.texto { max-width: 72ch; }
.texto p { margin-bottom: 1.15em; }

/* ---------- Botones ----------------------------------------------------- */

.botones { display: flex; flex-wrap: wrap; gap: 12px; }

.boton {
	display: inline-block; padding: 13px 26px; border-radius: var(--radio);
	text-decoration: none; font-size: .96rem; font-weight: 600;
	border: 1.5px solid transparent; transition: background .15s, color .15s;
}
.boton-principal { background: var(--acento); color: #fff; border-color: var(--acento); }
.boton-principal:hover { background: #9c7842; border-color: #9c7842; color: #fff; }
.boton-borde { border-color: rgba(255,255,255,.5); color: #fff; }
.boton-borde:hover { background: rgba(255,255,255,.12); color: #fff; }
.boton-oscuro { border-color: var(--azul); color: var(--azul); }
.boton-oscuro:hover { background: var(--azul); color: #fff; }

/* ---------- Grillas y tarjetas ------------------------------------------ */

.grilla { display: grid; gap: 22px; }
.grilla-2 { grid-template-columns: repeat(2, 1fr); }
.grilla-3 { grid-template-columns: repeat(3, 1fr); }
.grilla-4 { grid-template-columns: repeat(4, 1fr); }

.tarjeta {
	background: var(--fondo); border: 1px solid var(--linea);
	border-radius: var(--radio); padding: 26px 24px;
	border-top: 3px solid var(--acento);
}
.tarjeta h3 { margin-bottom: .45em; }
.tarjeta p { color: var(--tenue); font-size: .96rem; margin-bottom: 1em; }
.tarjeta .enlace { font-size: .9rem; font-weight: 600; text-decoration: none; }
.tarjeta .enlace::after { content: " \203A"; }

.tarjeta-enlace { display: block; text-decoration: none; color: inherit; }
.tarjeta-enlace:hover { border-color: var(--acento); color: inherit; }
.tarjeta-enlace:hover h3 { color: var(--acento); }

/* ---------- Listas ------------------------------------------------------ */

.lista-marcada { list-style: none; margin: 0; padding: 0; }
.lista-marcada li {
	position: relative; padding-left: 26px; margin-bottom: .6em; color: var(--texto);
}
.lista-marcada li::before {
	content: ""; position: absolute; left: 0; top: .62em;
	width: 8px; height: 8px; background: var(--acento); border-radius: 50%;
}

.lista-columnas { columns: 2; column-gap: 40px; }
.lista-columnas li { break-inside: avoid; }

/* ---------- Socios ------------------------------------------------------ */

/* Ficha de socio con retrato circular.
   El circulo recorta las esquinas, con lo cual el encuadre se concentra en la
   cara y se disimulan las diferencias de vestuario o de fondo entre una foto
   y otra. Es ademas la convencion habitual para fotos de equipo. */
.socio {
	background: #fff;
	border: 1px solid var(--linea); border-radius: var(--radio);
	padding: 30px 28px 28px;
	text-align: center;
}

.socio img,
.socio-foto {
	width: 144px; height: 144px;
	border-radius: 50%;
	margin: 0 auto 20px;
	display: block;
	background: var(--fondo-alt);
	box-shadow: 0 0 0 4px var(--fondo-alt), 0 0 0 5px var(--linea);
}
.socio img { object-fit: cover; object-position: center 42%; }

.socio-foto {
	background:
		repeating-linear-gradient(135deg,
			rgba(22,40,61,.05) 0 10px, rgba(22,40,61,.02) 10px 20px),
		var(--fondo-alt);
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 6px; padding: 16px;
	color: var(--tenue); font-size: .8rem; text-align: center;
}
.socio-foto .icono { width: 26px; height: 26px; color: #9fadbb; }
.socio-foto span:not(.socio-archivo) { font-size: .74rem; line-height: 1.25; }
.socio-archivo { display: none; }

.socio-datos h3 { margin-bottom: .15em; }
.socio-rol {
	color: var(--acento); font-size: .86rem; font-weight: 600; margin-bottom: 1.1em;
	line-height: 1.4;
}
.socio-datos p { font-size: .93rem; color: var(--tenue); }

/* La resena va alineada a la izquierda: centrada se vuelve incomoda de leer
   apenas pasa de dos renglones. El nombre y el cargo si quedan centrados. */
.socio-bio { text-align: left; }
.socio-bio p { margin-bottom: .85em; line-height: 1.6; }
.socio-bio p:last-child { margin-bottom: 0; }

/* ---------- Contacto ---------------------------------------------------- */

.contacto-grilla { display: grid; grid-template-columns: 1fr 1.15fr; gap: 48px; }

.dato { margin-bottom: 24px; }
.dato dt {
	font-size: .76rem; text-transform: uppercase; letter-spacing: .1em;
	color: var(--tenue); margin-bottom: 4px;
}
.dato dd { margin: 0; font-size: 1.05rem; }
.dato dd a { text-decoration: none; }
.dato dd a:hover { text-decoration: underline; }

.mapa {
	margin-top: 32px; border: 1px solid var(--linea);
	border-radius: var(--radio); overflow: hidden; line-height: 0;
}
.mapa iframe { width: 100%; height: 300px; border: 0; }

/* ---------- Formulario -------------------------------------------------- */

.formulario {
	background: var(--fondo-alt); border: 1px solid var(--linea);
	border-radius: var(--radio); padding: 32px;
}
.campo { margin-bottom: 18px; }
.campo label {
	display: block; font-size: .88rem; font-weight: 600;
	margin-bottom: 6px; color: var(--azul);
}
.campo input, .campo select, .campo textarea {
	width: 100%; padding: 11px 13px; font: inherit; font-size: .96rem;
	color: var(--texto); background: #fff;
	border: 1px solid var(--linea); border-radius: var(--radio);
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
	outline: 2px solid var(--acento); outline-offset: 1px; border-color: var(--acento);
}
.campo textarea { min-height: 130px; resize: vertical; }
.campo-nota { font-size: .82rem; color: var(--tenue); margin-top: 14px; }
.requerido { color: var(--acento); }

/* Trampa antispam: invisible para personas, visible para robots */
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.aviso { padding: 15px 18px; border-radius: var(--radio); margin-bottom: 22px; font-size: .95rem; }
.aviso-ok    { background: #eaf4ec; border: 1px solid #b9d9c1; color: #245c33; }
.aviso-error { background: #fbecec; border: 1px solid #e3bdbd; color: #8a2b2b; }

/* ---------- Llamado final ----------------------------------------------- */

.cierre { background: var(--azul); color: #fff; padding: 58px 0; text-align: center; }
.cierre h2 { color: #fff; }
.cierre p { color: rgba(255,255,255,.82); max-width: 56ch; margin: 0 auto 1.6em; }
.cierre .botones { justify-content: center; }

/* ---------- Pie --------------------------------------------------------- */

.pie { background: var(--azul); color: rgba(255,255,255,.72); padding: 54px 0 0; font-size: .92rem; }
.pie-grilla { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.1fr; gap: 36px; }
.pie-marca { color: #fff; font-size: 1.1rem; font-weight: 600; margin-bottom: .1em; }
.pie-titulo {
	color: #fff; font-size: .78rem; text-transform: uppercase;
	letter-spacing: .11em; margin-bottom: .9em;
}
.pie-tenue { color: rgba(255,255,255,.6); font-size: .89rem; margin-bottom: .6em; }
.pie-lista { list-style: none; margin: 0 0 12px; padding: 0; }
.pie-lista li { margin-bottom: .45em; }
.pie a { color: rgba(255,255,255,.78); text-decoration: none; }
.pie a:hover { color: var(--acento); text-decoration: underline; }
.pie-legal {
	margin-top: 44px; padding: 20px 24px; border-top: 1px solid rgba(255,255,255,.12);
	font-size: .82rem; color: rgba(255,255,255,.5);
}
.pie-legal p { margin: 0; }

/* ---------- WhatsApp flotante ------------------------------------------- */

.wa-flotante {
	position: fixed; right: 20px; bottom: 20px; z-index: 60;
	width: 54px; height: 54px; border-radius: 50%;
	background: #25d366; color: #fff;
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 3px 14px rgba(0,0,0,.28);
}
.wa-flotante:hover { background: #1eb955; color: #fff; }

/* ---------- Responsive -------------------------------------------------- */

@media (max-width: 900px) {
	.grilla-4 { grid-template-columns: repeat(2, 1fr); }
	.pie-grilla { grid-template-columns: repeat(2, 1fr); gap: 30px; }
	.contacto-grilla { grid-template-columns: 1fr; gap: 36px; }
	.franja-grilla { grid-template-columns: repeat(2, 1fr); gap: 30px; }
	.bloque-mixto { grid-template-columns: 1fr; gap: 30px; }
}

@media (max-width: 780px) {
	body { font-size: 16px; }
	h1 { font-size: 1.8rem; }
	.portada h1 { font-size: 1.95rem; }
	.marca img { width: 185px; }
	.franja-grilla { grid-template-columns: 1fr; gap: 22px; }
	.foto-pendiente { min-height: 190px; }
	/* En celular se carga la version liviana de la foto: 37 KB en vez de 166 */
	.portada {
		background-image:
			linear-gradient(160deg,
				rgba(18, 33, 51, .96) 0%,
				rgba(24, 43, 66, .88) 60%,
				rgba(31, 56, 85, .74) 100%),
			url('../img/portada-movil.jpg');
		background-position: center;
	}
	.encabezado {
		padding: 40px 0 36px;
		background-image:
			linear-gradient(160deg,
				rgba(18, 33, 51, .96) 0%,
				rgba(24, 43, 66, .89) 60%,
				rgba(31, 56, 85, .74) 100%),
			url('../img/banda-movil.jpg');
		background-position: center;
	}
	.portada { padding: 56px 0 50px; }
	.seccion { padding: 46px 0; }
	.grilla-2, .grilla-3 { grid-template-columns: 1fr; }
	.lista-columnas { columns: 1; }

	.menu-boton { display: block; }
	.cabecera-fila { flex-wrap: wrap; min-height: 66px; }
	.menu { display: none; width: 100%; }
	.menu.abierto { display: block; }
	.menu ul { flex-direction: column; gap: 0; padding: 6px 0 14px; }
	.menu a { padding: 12px 4px; border-bottom: 1px solid rgba(255,255,255,.1); }
}

@media (max-width: 520px) {
	.grilla-4 { grid-template-columns: 1fr; }
	.pie-grilla { grid-template-columns: 1fr; }
	.formulario { padding: 22px 18px; }
	.botones .boton { width: 100%; text-align: center; }
}

@media print {
	.cabecera, .wa-flotante, .cierre, .menu-boton { display: none; }
	body { font-size: 12pt; }
}