html body.contact-page { 
  background: #fff; 
}

.page{
    display:grid;
    grid-template-columns: 1.05fr 0.95fr;   /* izquierda texto + derecha foto */
    gap: 36px;
    padding-block: 48px 56px;
  }
  
  /* Columna izquierda */
  .brand-title{
    font-size: 48px;
    letter-spacing: .06em;
    margin-bottom: 12px;
    font-weight: 700;
    color: #41070A;
    text-align: center;
  }
  .taglines p{font-weight:600}
  .taglines p + p{margin-top:4px}
  .lead{
    margin-top:18px;
    max-width: 560px;
    color:#3B0C0C;
  }
  .contact-title{
    margin-top:28px; font-size:20px;
    color: #655D49;
  }
  
  /* Formulario */
  .contact-form{margin-top:12px; max-width:620px;}
  .grid-2{
    display:grid; grid-template-columns:1fr 1fr; gap:14px;
  }
  .contact-form > label,
  .contact-form .grid-2 label{display:block}
  .contact-form textarea{resize:vertical; min-height:140px}
  .contact-form .btn-primary{
    margin-top:12px; width:220px; height:42px; border-radius:8px;
  }
  
  /* Columna derecha (foto grande) */
  .col-right{
    display:flex; align-items:flex-start; justify-content:center;
  }
  .hero-photo{
    width:100%; 
    height:100%;
    max-height: 640px;
    object-fit: cover;
    border-radius: 8px;
    /*box-shadow: 0 8px 28px rgba(0,0,0,.15);*/
  }


  /* ===== forms ===== */


.contact-form label span {
    display: block;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 6px;
    color: var(--ink);
  }
  
  .contact-form input,
  .contact-form textarea {
    resize: none;  
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 15px;
    font-family: inherit;
    background-color: var(--color-ivory-soft);
    color: #333;
    transition: border-color 0.25s, box-shadow 0.25s;
  }
  
  .contact-form input:focus,
  .contact-form textarea:focus {
    outline: none;
    border-color: var(--color-ivory-soft);
    box-shadow: 0 0 0 2px rgba(106, 100, 78, 0.25);
  }
  
  /* Espaciado entre elementos */
  .contact-form > label,
  .contact-form .grid-2 label {
    margin-bottom: 14px;
  }
  
  .contact-form .btn-primary {
    margin-top: 8px;
    width: 180px;
    height: 44px;
    border-radius: 8px;
    background-color: var(--color-olive-dark);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background-color 0.25s;
  }
  
  .contact-form .btn-primary:hover {
    background-color: #5a5440;
  }
  
 
/* === EXTRAAAA Igualar alturas de columnas y estirar la foto === */
.page{
  /* antes podías tener align-items:end; cámbialo a: */
  align-items: stretch;               /* ambas columnas con la misma altura */
}

.col-right{
  align-self: stretch;                 /* la columna derecha ocupa toda la altura del track */
  display: grid;                       /* permite que el hijo se estire fácil */
}

.hero-photo{
  width: 100%;
  height: 100%;                        /* CLAVE: llena la altura de la celda */
  object-fit: cover;                   /* recorte elegante */
  border-radius: 8px;
}

/* Por si el botón dejaba un hueco, evita margen extra abajo del form */
.contact-form{ margin-bottom: 0; }

/* Responsivo (stack en móvil) */
@media (max-width: 767px){
  .page{
    grid-template-columns: 1fr;
    align-items: start;
  }
  .col-right{ align-self: auto; }
  .hero-photo{ height: auto; }         /* en móvil que no fuerce altura */
}



/* ==================== MOBILE (≤767px) ==================== */
/* Reordenamos elementos para que la foto vaya antes de "Contáctanos" */
@media (max-width: 767px){
  .page{
    grid-template-columns: 1fr;
    /* Orden: título → taglines → foto → párrafo → CTA → form */
    grid-template-areas:
      "title"
      "taglines"
      "image"
      "lead"
      "contact"
      "form";
    gap: 16px;
    padding-block: 24px 40px;
    align-items: start;
  }

  /* Truco: “aplanar” la columna izquierda para poder intercalar la imagen */
  .col-left{ display: contents; }

  .brand-title{ grid-area: title; text-align:center; font-size: 20px; margin-bottom: 6px; }
  .taglines{ grid-area: taglines; text-align:center; }
  .lead{ grid-area: lead; text-align:center; margin: 6px auto 0; max-width: 52ch; }
  .contact-title{ grid-area: contact; text-align:center; font-size: 32px; margin-top: 18px; }
  .contact-form{ grid-area: form; }

  .col-right{ grid-area: image; align-self: center; }
  .hero-photo{ width:100%; height:auto; border-radius:8px; }

  /* Form en una columna y botón ancho */
  .grid-2{ grid-template-columns: 1fr; gap: 12px; }
  .contact-form{ max-width: 100%; margin-bottom:0; }
  .contact-form .btn-primary{ width:100%; height:52px; font-size:16px; border-radius:10px; }
}


/* ==================== TABLET (768–1024px) ==================== */
@media (min-width: 768px) and (max-width: 1024px){
  .page{
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "taglines"
      "lead"
      "image"
      "contact"
      "form";
    gap: 24px;
    padding-block: 32px 48px;
    align-items: start;
  }

  /* “Aplanamos” la columna izquierda para intercalar la imagen */
  .col-left{ display: contents; }

  .taglines{ grid-area: taglines; text-align:center; }
  .lead{ grid-area: lead; text-align:center; margin: 4px auto 0; max-width: 70ch; }

  /* Imagen centrada y con el MISMO ancho que el contenedor del form */
  .col-right{ grid-area: image; display: block; }
  .hero-photo{
    display:block;
    width: 100%;          /* usa el ancho del .container */
    height: auto;
    border-radius:10px;
    margin: 0;            /* sin márgenes extra */
  }

  .contact-title{
    grid-area: contact;
    text-align:center;
    font-size: 36px;
    margin-top: 8px;
  }

  /* Form con el MISMO ancho que la imagen */
  .contact-form{
    grid-area: form;
    width: 100%;          /* igual que la imagen */
    max-width: none;      /* quita el tope que lo hacía más angosto */
    margin: 0;            /* que use solo el padding del .container */
  }

  /* En tablet, la primera fila del form sí va a 2 columnas */
  .grid-2{
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .contact-form .btn-primary{
    width:100%;
    height:54px;
    font-size:16px;
  }
}


/* ==================== DESKTOP (≥1025px) ==================== */
@media (min-width: 1025px){
  /* Botón del ancho del formulario (igual al último input) */
  .contact-form .btn-primary{
    width: 100%;
    height: 48px;           /* opcional: un poco más alto */
  }

  /* Asegura que la imagen llegue hasta el botón */
  .col-right{
    align-self: stretch;    /* la columna derecha ocupa toda la altura */
    align-items: stretch;   /* y su contenido también */
  }
  .hero-photo{
    max-height: none;       /* quita el límite de 640px solo en desktop */
    height: 100%;           /* ya lo tienes, se mantiene */
    object-fit: cover;      /* recorte elegante al estirar */
  }

  /* Por si acaso, elimina margen inferior del form */
  .contact-form{ margin-bottom: 0; }
}




.contact-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px; /* espacio entre columnas */
  margin-top: 32px;
}

.contact-info .col p {
  font-size: 16px;
  line-height: 1.4;
  margin: 0;
  color: #3B0C0C; /* tu marrón */
}

.contact-info a {
  color: #3B0C0C;
  font-weight: bold;
}




/* ===== Bloque info (2 columnas) ===== */
.contact-info{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;                 /* separación entre columnas */
  margin: 28px auto 0;       /* pega al botón, como en la captura */
  padding-inline: 0;         /* usa el padding del .container si lo tienes */
}

.contact-info .col p{ margin: 0 0 10px; color:#3B0C0C; }

/* Título (CONTACTO, UBICACIÓN) */
.contact-info .info-title{
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
  font-size: 20px;
  line-height: 1.15;
}

/* Teléfono grande como en la foto */
.contact-info .info-big{
  font-weight: 700;
  font-size: 28px;
  line-height: 1.2;
}

/* Párrafos de dirección en 2 líneas cómodas */
.contact-info .info-lines{
  font-size: 20px;
  line-height: 1.35;
}

/* Enlace “Google Maps” subrayado y grueso */
.contact-info .info-link a{
  font-weight: 800;
  color:#3B0C0C;
  font-size: 20px;
  line-height: 1.2;
}

/* Responsive: 1 columna en móvil */
@media (max-width: 767px){
  .contact-info{
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 24px;
  }
  .contact-info .info-big,
  .contact-info .info-lines,
  .contact-info .info-link a{
    font-size: 18px;
  }
}



/* H1 centrado y abarcando todo el grid */
.page > .page-title{
  grid-column: 1 / -1;  /* ocupa ambas columnas */
  text-align: center;
  margin: 0 0 12px;
}

/* Opcional: tamaños responsivos */
@media (max-width: 767px){
  .page > .page-title{
    font-size: clamp(28px, 6.5vw, 48px);
  }
}

/* Mantener formato tipográfico en el link del teléfono */
.contact-info .info-big a{
  color: inherit;           /* mismo color que .info-big */
  font: inherit;            /* hereda tamaño y peso */
  text-decoration: none;    /* sin subrayado por defecto */
  display: inline-block;    /* mejor foco/clic */
  cursor: pointer;
}

.contact-info .info-big a:hover,
.contact-info .info-big a:focus-visible, .contact-info .info-link a:hover{
  text-decoration: underline;
  text-underline-offset: 3px;
  outline: none;            /* evita doble estilo con focus */
}




















html body.contact-page { 
  background: #fff; 
}

.page{
    display:grid;
    grid-template-columns: 1.05fr 0.95fr;   /* izquierda texto + derecha foto */
    gap: 36px;
    padding-block: 48px 56px;
  }
  
  /* Columna izquierda */
  .brand-title{
    font-size: 64px;
    letter-spacing: .06em;
    margin-bottom: 12px;
    font-weight: 700;
    color: #41070A;
  }
  .taglines p{font-weight:600}
  .taglines p + p{margin-top:4px}
  .lead{
    margin-top:18px;
    max-width: 560px;
    color:#3B0C0C;
  }
  .contact-title{
    margin-top:28px; font-size:20px;
    color: #655D49;
  }
  
  /* Formulario */
  .contact-form{margin-top:12px; max-width:620px;}
  .grid-2{
    display:grid; grid-template-columns:1fr 1fr; gap:14px;
  }
  .contact-form > label,
  .contact-form .grid-2 label{display:block}
  .contact-form textarea{resize:vertical; min-height:140px}
  .contact-form .btn-primary{
    margin-top:12px; width:220px; height:42px; border-radius:8px;
  }
  
  /* Columna derecha (foto grande) */
  .col-right{
    display:flex; align-items:flex-start; justify-content:center;
  }
  .hero-photo{
    width:100%; 
    height:100%;
    max-height: 640px;
    object-fit: cover;
    border-radius: 8px;
    /*box-shadow: 0 8px 28px rgba(0,0,0,.15);*/
  }


  /* ===== forms ===== */


.contact-form label span {
    display: block;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 6px;
    color: var(--ink);
  }
  
  .contact-form input,
  .contact-form textarea {
    resize: none;  
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 15px;
    font-family: inherit;
    background-color: var(--color-ivory-soft);
    color: #333;
    transition: border-color 0.25s, box-shadow 0.25s;
  }
  
  .contact-form input:focus,
  .contact-form textarea:focus {
    outline: none;
    border-color: var(--color-ivory-soft);
    box-shadow: 0 0 0 2px rgba(106, 100, 78, 0.25);
  }
  
  /* Espaciado entre elementos */
  .contact-form > label,
  .contact-form .grid-2 label {
    margin-bottom: 14px;
  }
  
  .contact-form .btn-primary {
    margin-top: 8px;
    width: 180px;
    height: 44px;
    border-radius: 8px;
    background-color: var(--color-olive-dark);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background-color 0.25s;
  }
  
  .contact-form .btn-primary:hover {
    background-color: #5a5440;
  }
  
 
/* === EXTRAAAA Igualar alturas de columnas y estirar la foto === */
.page{
  /* antes podías tener align-items:end; cámbialo a: */
  align-items: stretch;               /* ambas columnas con la misma altura */
}

.col-right{
  align-self: stretch;                 /* la columna derecha ocupa toda la altura del track */
  display: grid;                       /* permite que el hijo se estire fácil */
}

.hero-photo{
  width: 100%;
  height: 100%;                        /* CLAVE: llena la altura de la celda */
  object-fit: cover;                   /* recorte elegante */
  border-radius: 8px;
}

/* Por si el botón dejaba un hueco, evita margen extra abajo del form */
.contact-form{ margin-bottom: 0; }

/* Responsivo (stack en móvil) */
@media (max-width: 767px){
  .page{
    grid-template-columns: 1fr;
    align-items: start;
  }
  .col-right{ align-self: auto; }
  .hero-photo{ height: auto; }         /* en móvil que no fuerce altura */
}



/* ==================== MOBILE (≤767px) ==================== */
/* Reordenamos elementos para que la foto vaya antes de "Contáctanos" */
@media (max-width: 767px){
  .page{
    grid-template-columns: 1fr;
    /* Orden: título → taglines → foto → párrafo → CTA → form */
    grid-template-areas:
      "title"
      "taglines"
      "image"
      "lead"
      "contact"
      "form";
    gap: 16px;
    padding-block: 24px 40px;
    align-items: start;
  }

  /* Truco: “aplanar” la columna izquierda para poder intercalar la imagen */
  .col-left{ display: contents; }

  .brand-title{ grid-area: title; text-align:center; font-size: 44px; margin-bottom: 6px; }
  .taglines{ grid-area: taglines; text-align:center; }
  .lead{ grid-area: lead; text-align:center; margin: 6px auto 0; max-width: 52ch; }
  .contact-title{ grid-area: contact; text-align:center; font-size: 32px; margin-top: 18px; }
  .contact-form{ grid-area: form; }

  .col-right{ grid-area: image; align-self: center; }
  .hero-photo{ width:100%; height:auto; border-radius:8px; }

  /* Form en una columna y botón ancho */
  .grid-2{ grid-template-columns: 1fr; gap: 12px; }
  .contact-form{ max-width: 100%; margin-bottom:0; }
  .contact-form .btn-primary{ width:100%; height:52px; font-size:16px; border-radius:10px; }
}


/* ==================== TABLET (768–1024px) ==================== */
@media (min-width: 768px) and (max-width: 1024px){
  .page{
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "taglines"
      "lead"
      "image"
      "contact"
      "form";
    gap: 24px;
    padding-block: 32px 48px;
    align-items: start;
  }

  /* “Aplanamos” la columna izquierda para intercalar la imagen */
  .col-left{ display: contents; }

  .brand-title{ grid-area: title; text-align:center; font-size: 64px; }
  .taglines{ grid-area: taglines; text-align:center; }
  .lead{ grid-area: lead; text-align:center; margin: 4px auto 0; max-width: 70ch; }

  /* Imagen centrada y con el MISMO ancho que el contenedor del form */
  .col-right{ grid-area: image; display: block; }
  .hero-photo{
    display:block;
    width: 100%;          /* usa el ancho del .container */
    height: auto;
    border-radius:10px;
    margin: 0;            /* sin márgenes extra */
  }

  .contact-title{
    grid-area: contact;
    text-align:center;
    font-size: 36px;
    margin-top: 8px;
  }

  /* Form con el MISMO ancho que la imagen */
  .contact-form{
    grid-area: form;
    width: 100%;          /* igual que la imagen */
    max-width: none;      /* quita el tope que lo hacía más angosto */
    margin: 0;            /* que use solo el padding del .container */
  }

  /* En tablet, la primera fila del form sí va a 2 columnas */
  .grid-2{
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .contact-form .btn-primary{
    width:100%;
    height:54px;
    font-size:16px;
  }
}


/* ==================== DESKTOP (≥1025px) ==================== */
@media (min-width: 1025px){
  /* Botón del ancho del formulario (igual al último input) */
  .contact-form .btn-primary{
    width: 100%;
    height: 48px;           /* opcional: un poco más alto */
  }

  /* Asegura que la imagen llegue hasta el botón */
  .col-right{
    align-self: stretch;    /* la columna derecha ocupa toda la altura */
    align-items: stretch;   /* y su contenido también */
  }
  .hero-photo{
    max-height: none;       /* quita el límite de 640px solo en desktop */
    height: 100%;           /* ya lo tienes, se mantiene */
    object-fit: cover;      /* recorte elegante al estirar */
  }

  /* Por si acaso, elimina margen inferior del form */
  .contact-form{ margin-bottom: 0; }
}