/*
   Cooperativa San José
   Sitio institucional responsive con formulario PHP seguro.
*/

:root {
   --verde-900: #073f2a;
   --verde-800: #0b5d3b;
   --verde-700: #14724a;
   --verde-500: #38a169;
   --verde-100: #eaf5ee;
   --turquesa: #049da3;
   --crema: #f6f4ed;
   --blanco: #ffffff;
   --gris-900: #17211c;
   --gris-700: #44514a;
   --gris-500: #6b7670;
   --borde: #dce5df;
   --sombra: 0 18px 50px rgba(7, 63, 42, 0.12);
   --radio: 24px;
   --ancho: 1180px;
}

* {
   box-sizing: border-box;
}

html {
   scroll-behavior: smooth;
}

body {
   margin: 0;
   font-family: "Segoe UI", Arial, sans-serif;
   color: var(--gris-900);
   background: var(--crema);
   line-height: 1.65;
}

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

a {
   color: inherit;
}

.contenedor {
   width: min(calc(100% - 40px), var(--ancho));
   margin-inline: auto;
}

.salto-contenido {
   position: absolute;
   left: -9999px;
   top: 0;
}

.salto-contenido:focus {
   left: 20px;
   top: 20px;
   z-index: 100;
   padding: 12px 18px;
   color: var(--blanco);
   background: var(--verde-900);
   border-radius: 8px;
}

.cabecera {
   background: var(--blanco);
   border-bottom: 1px solid var(--borde);
}

.cabecera__interior {
   min-height: 118px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 32px;
   padding-block: 18px;
}

.marca {
   display: flex;
   align-items: center;
   gap: 24px;
}

.marca__logo {
   width: 116px;
   height: auto;
   object-fit: contain;
}

.marca__texto {
   border-left: 1px solid var(--borde);
   padding-left: 24px;
}

.marca__entidad,
.marca__nombre {
   margin: 0;
}

.marca__entidad {
   max-width: 560px;
   color: var(--gris-700);
   font-size: 0.95rem;
   font-weight: 600;
   letter-spacing: 0.02em;
}

.marca__nombre {
   color: var(--verde-800);
   font-family: Georgia, "Times New Roman", serif;
   font-size: clamp(2rem, 4vw, 3.25rem);
   font-weight: 700;
   line-height: 1.05;
}

.cabecera__sello {
   display: grid;
   justify-items: end;
   color: var(--verde-800);
}

.cabecera__sello-numero {
   font-size: 1.65rem;
   font-weight: 800;
   line-height: 1;
}

.cabecera__sello-texto {
   margin-top: 4px;
   color: var(--gris-500);
   font-size: 0.82rem;
   text-transform: uppercase;
   letter-spacing: 0.12em;
}

.hero {
   position: relative;
   overflow: hidden;
   color: var(--blanco);
   background:
      radial-gradient(circle at 82% 24%, rgba(4, 157, 163, 0.34), transparent 30%),
      linear-gradient(135deg, var(--verde-900), var(--verde-700));
}

.hero::after {
   content: "";
   position: absolute;
   width: 420px;
   height: 420px;
   right: -180px;
   bottom: -230px;
   border: 70px solid rgba(255, 255, 255, 0.05);
   border-radius: 50%;
}

.hero__interior {
   position: relative;
   z-index: 1;
   min-height: 590px;
   display: grid;
   grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.75fr);
   gap: 72px;
   align-items: center;
   padding-block: 88px;
}

.hero__contenido h1 {
   max-width: 820px;
   margin: 14px 0 22px;
   font-family: Georgia, "Times New Roman", serif;
   font-size: clamp(2.8rem, 6vw, 5.5rem);
   line-height: 1.02;
   letter-spacing: -0.035em;
}

.hero__bajada {
   max-width: 720px;
   margin: 0 0 34px;
   color: rgba(255, 255, 255, 0.86);
   font-size: clamp(1.08rem, 2vw, 1.35rem);
}

.etiqueta {
   margin: 0;
   color: var(--verde-700);
   font-size: 0.82rem;
   font-weight: 800;
   letter-spacing: 0.15em;
   text-transform: uppercase;
}

.etiqueta--clara,
.hero .etiqueta {
   color: #bdeed1;
}

.boton {
   display: inline-flex;
   align-items: center;
   min-height: 50px;
   padding: 0 24px;
   color: var(--verde-900);
   background: var(--blanco);
   border-radius: 999px;
   font-weight: 750;
   text-decoration: none;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16);
   transition: transform 160ms ease, box-shadow 160ms ease;
}

.boton:hover,
.boton:focus-visible {
   transform: translateY(-2px);
   box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
}

.hero__panel {
   padding: 34px;
   background: rgba(255, 255, 255, 0.1);
   border: 1px solid rgba(255, 255, 255, 0.22);
   border-radius: var(--radio);
   backdrop-filter: blur(8px);
   box-shadow: var(--sombra);
}

.hero__panel-titulo {
   margin: 0 0 12px;
   font-size: 1.2rem;
   font-weight: 800;
}

.hero__panel p {
   margin-top: 0;
   color: rgba(255, 255, 255, 0.84);
}

.hero__panel-dato {
   display: grid;
   gap: 2px;
   margin-top: 30px;
   padding-top: 24px;
   border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.hero__panel-dato strong {
   font-size: 1.6rem;
}

.hero__panel-dato span {
   color: rgba(255, 255, 255, 0.72);
}

.seccion {
   padding-block: 96px;
}

.seccion--clara {
   background: var(--blanco);
}

.seccion--verde {
   color: var(--blanco);
   background: var(--verde-900);
}

.encabezado-seccion {
   max-width: 760px;
   margin-bottom: 50px;
}

.encabezado-seccion h2,
.respaldo h2 {
   margin: 12px 0 0;
   font-family: Georgia, "Times New Roman", serif;
   font-size: clamp(2.2rem, 4vw, 3.8rem);
   line-height: 1.08;
   letter-spacing: -0.025em;
}

.encabezado-seccion--claro h2 {
   color: var(--blanco);
}

.columnas {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 64px;
   color: var(--gris-700);
   font-size: 1.08rem;
}

.columnas p {
   margin-top: 0;
}

.valores {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 20px;
}

.tarjeta {
   min-height: 230px;
   padding: 28px;
   background: rgba(255, 255, 255, 0.07);
   border: 1px solid rgba(255, 255, 255, 0.12);
   border-radius: 18px;
}

.tarjeta__numero {
   color: #8ee0b0;
   font-size: 0.8rem;
   font-weight: 800;
   letter-spacing: 0.15em;
}

.tarjeta h3 {
   margin: 28px 0 10px;
   font-size: 1.3rem;
}

.tarjeta p {
   margin: 0;
   color: rgba(255, 255, 255, 0.72);
}

.respaldo {
   display: grid;
   grid-template-columns: minmax(0, 1.3fr) minmax(300px, 0.7fr);
   gap: 72px;
   align-items: center;
}

.respaldo > div:first-child > p:not(.etiqueta) {
   max-width: 720px;
   color: var(--gris-700);
}

.domicilio {
   padding: 34px;
   background: var(--verde-100);
   border-left: 5px solid var(--verde-700);
   border-radius: 0 18px 18px 0;
}

.domicilio__titulo {
   margin: 0 0 12px;
   color: var(--verde-800);
   font-weight: 800;
}

.domicilio address {
   color: var(--gris-700);
   font-style: normal;
   line-height: 1.75;
}

.pie {
   color: rgba(255, 255, 255, 0.76);
   background: #052d1f;
}

.pie__interior {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 50px;
   align-items: center;
   padding-block: 42px;
}

.pie p {
   margin: 0;
}

.pie__nombre {
   color: var(--blanco);
   font-weight: 750;
}

.pie__legal {
   text-align: right;
   font-size: 0.9rem;
}

@media (max-width: 900px) {
   .cabecera__sello {
      display: none;
   }

   .hero__interior,
   .respaldo {
      grid-template-columns: 1fr;
   }

   .hero__interior {
      min-height: auto;
      gap: 42px;
   }

   .hero__panel {
      max-width: 620px;
   }

   .valores {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }
}

@media (max-width: 680px) {
   .contenedor {
      width: min(calc(100% - 28px), var(--ancho));
   }

   .cabecera__interior {
      min-height: 92px;
      padding-block: 12px;
   }

   .marca {
      gap: 14px;
   }

   .marca__logo {
      width: 74px;
   }

   .marca__texto {
      padding-left: 14px;
   }

   .marca__entidad {
      font-size: 0.72rem;
   }

   .marca__nombre {
      font-size: 2rem;
   }

   .hero__interior,
   .seccion {
      padding-block: 66px;
   }

   .hero__contenido h1 {
      font-size: clamp(2.55rem, 13vw, 4rem);
   }

   .columnas,
   .valores,
   .pie__interior {
      grid-template-columns: 1fr;
   }

   .columnas {
      gap: 18px;
   }

   .tarjeta {
      min-height: 190px;
   }

   .pie__legal {
      text-align: left;
   }
}

@media (prefers-reduced-motion: reduce) {
   html {
      scroll-behavior: auto;
   }

   .boton {
      transition: none;
   }
}


/* Contacto */
.hero__acciones {
   display: flex;
   flex-wrap: wrap;
   gap: 14px;
}

.boton--secundario {
   color: var(--blanco);
   background: transparent;
   border: 1px solid rgba(255, 255, 255, 0.55);
   box-shadow: none;
}

.domicilio__contacto {
   margin-bottom: 0;
}

.domicilio a,
.contacto a {
   text-underline-offset: 3px;
}

.contacto {
   padding-block: 96px;
   color: var(--blanco);
   background: #101311;
}

.contacto__encabezado p:last-child {
   color: rgba(255, 255, 255, 0.72);
   font-size: 1.08rem;
}

.contacto__grilla {
   display: grid;
   grid-template-columns: minmax(0, 1.5fr) minmax(300px, 0.65fr);
   gap: 56px;
   align-items: start;
}

.contacto__formulario,
.contacto__tarjeta,
.mapa {
   min-width: 0;
}

.formulario__fila {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 24px;
}

.campo {
   margin-bottom: 22px;
}

.campo label {
   display: block;
   margin-bottom: 7px;
   color: rgba(255, 255, 255, 0.74);
   font-size: 0.94rem;
   font-weight: 650;
}

.campo input,
.campo textarea {
   width: 100%;
   color: var(--blanco);
   background: #2b302d;
   border: 1px solid #465049;
   border-radius: 8px;
   font: inherit;
   outline: none;
   transition: border-color 150ms ease, box-shadow 150ms ease;
}

.campo input {
   min-height: 52px;
   padding: 0 16px;
}

.campo textarea {
   min-height: 220px;
   padding: 14px 16px;
   resize: vertical;
}

.campo input:focus,
.campo textarea:focus {
   border-color: #7ac58c;
   box-shadow: 0 0 0 3px rgba(122, 197, 140, 0.18);
}

.formulario__ayuda {
   margin: -5px 0 22px;
   color: rgba(255, 255, 255, 0.56);
   font-size: 0.88rem;
}

.boton--enviar {
   border: 0;
   cursor: pointer;
}

.contacto__datos {
   display: grid;
   gap: 34px;
}

.contacto__tarjeta h3,
.mapa h3 {
   margin: 0 0 18px;
   font-family: Georgia, "Times New Roman", serif;
   font-size: 1.75rem;
   line-height: 1.15;
}

.contacto__tarjeta p,
.contacto__tarjeta address {
   margin: 0 0 9px;
   color: #8cc492;
   font-style: normal;
}

.contacto__nombre {
   font-weight: 800;
}

.mapa iframe {
   display: block;
   width: 100%;
   min-height: 310px;
   border: 0;
   border-radius: 14px;
   background: #262b28;
}

.aviso {
   margin-bottom: 24px;
   padding: 14px 16px;
   border: 1px solid;
   border-radius: 9px;
}

.aviso--ok {
   color: #c8f3d0;
   background: rgba(44, 130, 70, 0.25);
   border-color: #4d9f63;
}

.aviso--error {
   color: #ffd8d8;
   background: rgba(150, 45, 45, 0.25);
   border-color: #b85d5d;
}

.campo-trampa {
   position: absolute !important;
   left: -10000px !important;
   width: 1px !important;
   height: 1px !important;
   overflow: hidden !important;
}

@media (max-width: 900px) {
   .contacto__grilla {
      grid-template-columns: 1fr;
   }

   .contacto__datos {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }
}

@media (max-width: 680px) {
   .contacto {
      padding-block: 66px;
   }

   .formulario__fila,
   .contacto__datos {
      grid-template-columns: 1fr;
   }

   .mapa iframe {
      min-height: 280px;
   }
}