/* Phoenicia — estilos de la pagina «contactenos» */
/* ---------- CONTACTO ---------- */
  .contacto{ background: var(--white); position:relative; overflow:hidden; }
  .contacto-text{ position:relative; }
  .cedar-bg{
    position:absolute;
    left:46%; top:-30px;
    transform: translateX(-50%);
    width:1150px;
    opacity:0.4;
    z-index:0;
    pointer-events:none;
    filter: grayscale(1);
  }
  .contacto-text > *:not(.cedar-bg){ position:relative; z-index:1; }
 
  .contacto h1,
  .contacto h2{ font-size:clamp(1.49rem, 5.6vw, 2.4rem); margin-bottom:18px; }
  /* SIN TOPE DE MEDIDA, A PROPOSITO.

     Traia «max-width:480px» de la hoja de WordPress, donde esta seccion era
     una rejilla de dos columnas: el texto a la izquierda y el formulario a la
     derecha. Esa rejilla NO se migro: de ella solo quedaba una media query
     huerfana («.contacto .container{grid-template-columns:1fr}» sobre un
     elemento que no es rejilla), retirada en este mismo cambio. La seccion es
     de UNA columna, y ese tope dejaba el parrafo en 480 px de los ~1116
     disponibles.

     base.css suelta la medida de los textos cuando el contenedor tiene un
     solo hijo («section > .container.container:not(:has(> * + *))», 0,2,2),
     pero esta regla es 0,2,3 y le ganaba. Se quita en el origen, que es donde
     esta el error, y no subiendo la especificidad de la regla general. */
  .contacto > .container > div:first-child > p{
    font-size:0.98rem; color: var(--charcoal); margin-bottom:40px;
  }

  .info-list{ display:flex; flex-direction:column; gap:28px; }
  .info-item{ display:flex; align-items:flex-start; gap:18px; }
  .info-item .icon{
    width:46px; height:46px; border-radius:50%;
    background: var(--navy-blue);
    color: var(--white);
    display:flex; align-items:center; justify-content:center;
    font-size:1.2rem; flex-shrink:0;
  }
  .info-item .icon img{ display:block; }
  .info-item .label{
    font-size:0.75rem; letter-spacing:1.5px; text-transform:uppercase;
    color: var(--taupe); margin-bottom:4px;
  }
  .info-item .value{ font-size:1.05rem; color: var(--navy-heading); font-weight:500; }
  .info-item .value a{ border-bottom:1px solid var(--border-soft); }
  .info-item .value a:hover{ color: var(--gold-texto); border-bottom-color: var(--gold-texto); }