@charset "UTF-8";
/* =====================================================
    HERO (TÍTULO PRINCIPAL GRANDE)
   ===================================================== */

.poort-text {
  font-size: clamp(70px, 4vw, 150px) !important; /* tamaño grande responsive */
  line-height: 0.95 !important;                  /* interlineado */
  margin: 0 !important;                         /* elimina espacios */
  letter-spacing: -0.02em;                      /* estética más elegante */
  color: #2B2E33;                               /* color gris oscuro */
}


/* =====================================================
   ABOUT (SECCIÓN TEXTO GENERAL)
   ===================================================== */

.about-wrap {
  display: flex;
  justify-content: center;   /* centra horizontal */
  align-items: center;       /* centra vertical */
  text-align: center;
}


/* CONTENEDOR DEL TEXTO */
.about-text-color {
  text-align: center;
  word-break: keep-all !important;
}


/* =====================================================
   ABOUT - TEXTO (los párrafos / bloques de texto)
   ===================================================== */

.about-text-color h2 {
  font-size: clamp(18px, 2vw, 26px) !important; /* tamaño del texto */
  line-height: 1.6 !important;                  /* interlineado cómodo */
  letter-spacing: -0.01em;
  color: #2B2E33;                               /* gris oscuro (no negro puro) */

  max-width: 700px;                             /* ancho del bloque */
  margin: 0 auto 24px auto !important;          /* centrado + espacio abajo */

  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  hyphens: none !important;
}


/* =====================================================
   ABOUT - ANIMACIÓN SUAVE DE ENTRADA
   ===================================================== */

.about-text-color h2 {
  opacity: 0 !important;
  transform: translateY(30px) !important;
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.about-text-color h2.visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}


/* =====================================================
   DESACTIVAR ANIMACIONES EXTRA (si algo las mete)
   ===================================================== */

.about-text-animation,
.about-text-animation * {
  animation: none !important;
  transform: none !important;
}


/* =====================================================
   AJUSTES FINOS DE TEXTO INTERNO (SPANS)
   ===================================================== */

.about-text-animation span,
.about-text-color h2 span {
  display: inline !important;
  white-space: normal !important;
  letter-spacing: normal !important;
}

.about-text-color h2 {
  word-spacing: normal !important;
}
/* =====================================================
   SERVICIOS (SECCIÓN PRINCIPAL)
   ===================================================== */

/* CONTENEDOR DEL TÍTULO */
.services-title {
  text-align: center;
}


/* =====================================================
   TÍTULOS (SERVICIOS)
   ===================================================== */

/* TEXTO CHICO → “Servicios de” */
.services-title .small {
  font-size: clamp(75px, 1.5vw, 75px); /* ojo: estaba invertido */
  letter-spacing: 0em;
  color: #ffffff;
}

/* TEXTO GRANDE → “Diseño” */
.services-title .big {
  font-size: clamp(150px, 4vw, 150px); /* también invertido antes */
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #ffffff;
}


/* =====================================================
   AJUSTES SOLO DESKTOP
   ===================================================== */

@media (min-width: 769px) {

  .services-title {
    line-height: 0.35 !important; /* más lógico que 0.35 */
  }

  .services-title .big {
    line-height: 1.05 !important;
  }

}


/* =====================================================
   TEXTO DESCRIPTIVO (SERVICIOS)
   ===================================================== */

/* TEXTO GENERAL (si usás <p>) */
.services p {
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.6;
  color: #333;

  max-width: 600px;
  margin: 0 auto;
}

/* TEXTO CENTRAL PRINCIPAL */
.services-text {
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.6;
  letter-spacing: -0.01em;
  color: #fff;

  max-width: 650px;
  margin: 40px auto 0;
  text-align: left;
}


/* =====================================================
   MOBILE (SERVICIOS)
   ===================================================== */

@media (max-width: 768px) {

  .services-title {
    line-height: 1.2;
  }

  .services-title .small {
    font-size: 40px;
  }

  .services-title .big {
    font-size: 80px;
    line-height: 0.9;
  }

  .services-text {
    margin-top: 20px;
    padding-left: 5px;
    padding-right: 15px;
  }

}
/* =====================================================
   PORTFOLIO (SECCIÓN TRABAJOS)
   ===================================================== */

/* ESPACIADO GENERAL */
.wpo-service-section {
  padding-top: 50px;
  padding-bottom: 30px;
}


/* FONDOS */
.wpo-portfolio-section {
  background: #000;
  width: 100%;
}

#portfolio {
  background: #2B2E33;
  width: 100%;
}


/* CONTENEDOR GENERAL */
#portfolio .container {
  max-width: 100%;
  padding-left: 40px;
  padding-right: 40px;
}


/* TEXTO DE LAS CARDS */
#portfolio .blog-card-text {
  max-width: 700px;
  margin: 0 auto;
  text-align: left;
}


/* CARD */
#portfolio .blog-card {
  position: relative;
}


/* ELEMENTO DECORATIVO (shape) */
#portfolio .shape {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-350px);
}

/* LINK PEDIR PORTFOLIO */
.blog-card-text a {
  color: #cecece;          /* mismo gris que venís usando */
  text-decoration: underline;
}

/* =====================================================
   MOBILE (PORTFOLIO)
   ===================================================== */

@media (max-width: 768px) {

  #portfolio .shape {
    left: 20px;
    transform: none;
  }

  #portfolio .container {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  #portfolio .blog-card-text {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

}


/* FONDO BLOG (SI USA MISMA SECCIÓN) */
.wpo-blog-single-section {
  background: #2B2E33 !important;
}

/* =====================================================
   CONTACTO
   ===================================================== */

/* =====================================================
   CONTACTO - CONTENEDOR GENERAL
   ===================================================== */

.contact-section .container {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}

/* =====================================================
   TITULO "HABLEMOS"
   ===================================================== */

.contact-title .title-top h3 {
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #000;

  text-align: center;
  max-width: 700px;
  margin: 0 auto 15px;
}

/* =====================================================
   BAJADA (texto debajo del título)
   ===================================================== */

.contact-title .title-item p {
    font-size: clamp(16px, 1.5vw, 18px);
    line-height: 1.5;
    letter-spacing: -0.01em;
    color: #333;
    text-align: center;
    max-width: 700px;
    margin: 0 auto 40px;
    white-space: normal;
}

/* =====================================================
   FORMULARIO
   ===================================================== */

.contact-section form {
  max-width: 700px;
  margin: 0 auto;
}

/* Inputs y textarea */
.contact-section input,
.contact-section textarea {
  width: 100%;
  display: block;
}

/* Altura del textarea */
.contact-section textarea {
  min-height: 120px;
}

/* =====================================================
   MOBILE
   ===================================================== */

@media (max-width: 768px) {

  .contact-section .container {
    padding-left: 20px;
    padding-right: 20px;
  }

  .contact-title .title-top h3 {
    font-size: 32px;
  }

  .contact-title .title-item p {
    font-size: 16px;
    margin-bottom: 30px;
  }

  .contact-section form {
    width: 100%;
  }

}
/* =========================================
   FIX DEFINITIVO FORM CONTACTO
   ========================================= */

/* Forzar que TODOS los campos ocupen exactamente el mismo ancho */
.wpo-contact-section .input-item,
.wpo-contact-section .input-item input,
.wpo-contact-section .input-item textarea {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  box-sizing: border-box !important;
}

/* Igualar padding interno */
.wpo-contact-section .input-item input,
.wpo-contact-section .input-item textarea {
  padding: 14px 16px !important;
}

/* Eliminar cualquier restricción rara del textarea */
.wpo-contact-section textarea {
  resize: none;
}
/* =========================================
   FORM CONTACTO - MENSAJES
   ========================================= */

#success,
#error {
  display: none; /* lo maneja el JS */
  text-align: center;
  margin-top: 20px;
  font-size: 14px;

  opacity: 0;
  transition: opacity 0.3s ease;
}

/* mensaje OK */
#success {
  color: #2D3638 !important; /* ← CAMBIÁ ESTE COLOR */
}

/* mensaje ERROR */
#error {
  color: #c0392b;
}

/* fade suave al aparecer */
#success[style*="display: block"],
#error[style*="display: block"] {
  opacity: 1;
}