/* =====================================================
   PUNTO ARQUITECTURA
   MOBILE.CSS
   Versión exclusiva para teléfonos
=====================================================*/

/* =====================================================
   BASE
=====================================================*/

html{
    overflow-x:hidden;
}

body{

    overflow-x:hidden;

    background:#2c2e2e;

    -webkit-font-smoothing:antialiased;

    text-rendering:optimizeLegibility;

}

/* =====================================================
   NAVBAR
=====================================================*/

.navbar{

    height:72px;

    padding:0 18px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}

.logo-img{

    height:36px;

}

.nav-contact-info{

    display:none;

}

.menu-links{

    display:none;

}

.menu-icon{

    margin:0;

}

/* =====================================================
   HERO
=====================================================*/

.hero-punto{

    height:100svh;

    padding:0 24px;

    background-position:center;

    background-size:cover;

    background-attachment:scroll;

}

.hero-punto h1{

    font-size:2rem;

    font-weight:300;

    letter-spacing:5px;

    line-height:1.25;

}

.hero-punto p{

    width:100%;

    max-width:340px;

    margin:24px auto 40px;

    font-size:.78rem;

    letter-spacing:2px;

    line-height:1.8;

}

.btn-hero{

    width:220px;

    padding:16px;

    text-align:center;

    font-size:.72rem;

    letter-spacing:3px;

}

/* =====================================================
   TEXTOS
=====================================================*/

.text-section{

    padding:70px 28px;

}

.text-section h2{

    margin-bottom:24px;

}

.text-section p{

    font-size:.95rem;

    line-height:1.9;

}

/* =====================================================
   TÍTULOS
=====================================================*/

.subtitle{

    font-size:.62rem;

    letter-spacing:4px;

}

h2{

    font-size:1.2rem;

    letter-spacing:2px;

}

/* =====================================================
   BOTONES
=====================================================*/

.btn-more,
.btn-portfolio,
.services-action-wrapper a{

    width:100%;

    max-width:260px;

    text-align:center;

}

/* =====================================================
   ANIMACIONES
=====================================================*/

*{

    -webkit-tap-highlight-color:transparent;

}

button,
a{

    touch-action:manipulation;

}

/* =====================================================
   SERVICIOS
=====================================================*/

.services-section{

    padding:70px 22px;

}

.services-container-flex{

    display:flex;

    flex-direction:column;

    gap:18px;

    padding:0;

}

.service-column{

    width:100%;

    max-width:100%;

}

.service-item{

    min-height:170px;

    border:1px solid rgba(255,255,255,.08);

    background:#333636;

}

.service-front-wrapper{

    padding:28px 20px;

}

.service-main-content i{

    font-size:2rem;

}

.service-main-content h4{

    font-size:.8rem;

    letter-spacing:3px;

}

/* =====================================================
   OBRAS DESTACADAS
=====================================================*/

.gallery-section{

    padding:80px 18px;

}

.gallery-grid-4-vertical{

    display:flex;

    flex-direction:column;

    gap:28px;

    align-items:center;

}

/* TARJETA */

.portfolio-item-vertical{

    width:100%;

    max-width:340px;

    height:430px;

    background:#fafafa;

    border-radius:3px;

    overflow:hidden;

    box-shadow:0 12px 28px rgba(0,0,0,.28);

    border:1px solid #ddd;

}

/* FOTO */

.reveal-background{

    top:12px;

    left:12px;

    right:12px;

    bottom:82px;

}

/* OVERLAY */

.portfolio-vertical-overlay{

    top:12px;

    left:12px;

    right:12px;

    bottom:82px;

}

/* TEXTO */

.obra-top-info{

    top:auto;

    bottom:46px;

    left:18px;

}

.obra-title-top{

    color:#222;

    font-size:.95rem;

    letter-spacing:2px;

}

.obra-bottom-info{

    bottom:18px;

    left:18px;

}

.brand-vertical{

    transform:none;

    color:#777;

    font-size:.7rem;

    letter-spacing:2px;

}

/* GALERÍA */

#gallery-view .gallery-grid{

    display:flex;

    flex-direction:column;

    gap:14px;

}
/* =====================================================
   OBRAS DESTACADAS V2
=====================================================*/

.gallery-section{

    padding:80px 20px;

}

.gallery-grid-4-vertical{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:32px;

}

/* -------------------------
   TARJETA
------------------------- */

.portfolio-item-vertical{

    width:100%;

    max-width:360px;

    height:460px;

    background:#ffffff;

    border-radius:4px;

    overflow:hidden;

    border:1px solid #dcdcdc;

    box-shadow:
        0 10px 30px rgba(0,0,0,.30);

}

/* -------------------------
   FOTO
------------------------- */

.reveal-background{

    top:14px;

    left:14px;

    right:14px;

    bottom:90px;

}

/* -------------------------
   OVERLAY
------------------------- */

.portfolio-vertical-overlay{

    top:14px;

    left:14px;

    right:14px;

    bottom:90px;

}

/* -------------------------
   TÍTULO
------------------------- */

.obra-top-info{

    top:auto;

    bottom:50px;

    left:22px;

}

.obra-title-top{

    color:#222;

    font-size:.95rem;

    letter-spacing:2px;

    font-weight:500;

}

/* -------------------------
   LOGO
------------------------- */

.obra-bottom-info{

    left:22px;

    bottom:18px;

}

.brand-vertical{

    transform:none;

    color:#666;

    font-size:.70rem;

    letter-spacing:2px;

}

/* -------------------------
   QUITAR EFECTO BRILLO
------------------------- */

.portfolio-item-vertical::after{

    display:none;

}

/* ==========================================
   POLAROID - IMAGEN FIJA
========================================== */

.reveal-overlay{

    display:none;

}

.portfolio-vertical-overlay{

    display:none;

}

.overlay-content-vertical{

    display:none;

}

/* Quitamos zoom */

.portfolio-item-vertical:hover .reveal-background img,
.portfolio-item-vertical:active .reveal-background img{

    transform:none !important;

    filter:none !important;

}

/* Imagen completamente fija */

.reveal-background{

    overflow:hidden;

    background:#fff;

}

.reveal-background img{

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

    transition:none;

}















/* Animación limpia para Obras Destacadas en móviles */
#obras-destacadas .portfolio-item-vertical {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .65s ease, transform .65s ease;
}
#obras-destacadas .portfolio-item-vertical.reveal-active {
    opacity: 1;
    transform: translateY(0);
}
/* La imagen permanece dentro de su tarjeta */
#obras-destacadas .reveal-background {
    position: absolute;
    width: auto;
    height: auto;
}
@media (prefers-reduced-motion: reduce) {
    #obras-destacadas .portfolio-item-vertical {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* =====================================================
   SERVICIOS: ACORDEÓN EDITORIAL (SOLO MÓVIL)
   ===================================================== */
#servicios .services-container-flex {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 32px;
    padding: 0;
}
#servicios .service-column {
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
}
#servicios .service-item {
    min-height: 0;
    height: auto;
    display: block;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(255,255,255,.2);
    box-shadow: none;
}
#servicios .service-front-wrapper,
#servicios .service-item.active .service-front-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 23px 6px;
    transform: none;
    transition: none;
}
#servicios .service-main-content {
    flex: 1;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    min-width: 0;
}
#servicios .service-main-content i {
    display: none;
}
#servicios .service-main-content h4 {
    margin: 0;
    font-size: .78rem;
    font-weight: 400;
    letter-spacing: 2px;
    text-align: left;
}
#servicios .number {
    order: -1;
    margin: 0 14px 0 0;
    font-size: .75rem;
    opacity: .6;
    white-space: nowrap;
}
#servicios .service-front-wrapper::after {
    content: '+';
    margin-left: 12px;
    font-size: 1.4rem;
    font-weight: 300;
    line-height: 1;
}
#servicios .service-item.active .service-front-wrapper::after {
    content: '−';
}
#servicios .service-overlay {
    display: none;
    position: static;
    inset: auto;
    padding: 5px 18px 22px 43px;
    background: transparent;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
    pointer-events: auto;
}
#servicios .service-item.active .service-overlay {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: none;
}
#servicios .service-overlay h5 {
    margin: 0 0 17px;
    font-size: .7rem;
}
#servicios .detail-item { margin-bottom: 14px; }
#servicios .detail-item:last-child { margin-bottom: 0; }
#servicios .services-action-wrapper { margin-top: 36px; }

/* Tipografía editorial fina y detalles de servicios — solo celulares */
#servicios .service-main-content h4 { font-family: Helvetica, Arial, sans-serif; font-weight: 300; letter-spacing: 2.3px; }
#servicios .service-overlay h5 { font-weight: 300; letter-spacing: 2px; line-height: 1.6; }
#servicios .detail-item strong,
#servicios .service-remote-note strong { font-family: Helvetica, Arial, sans-serif; font-weight: 300; font-size: .72rem; letter-spacing: 1.5px; line-height: 1.6; }
#servicios .detail-item span,
#servicios .service-remote-note span { font-family: Helvetica, Arial, sans-serif; font-weight: 300; font-size: .76rem; letter-spacing: .25px; line-height: 1.7; color: #c6c6c6; }
#servicios .detail-item { margin-bottom: 22px; }
#servicios .service-remote-note { margin-top: 24px; padding: 16px 0 0; border-top: 1px solid rgba(255,255,255,.18); }
#servicios .service-remote-note strong,
#servicios .service-remote-note span { display: block; }
#servicios .service-remote-note span { margin-top: 8px; }


/* Subapartados desplegables dentro de cada servicio (solo móvil) */
#servicios .service-overlay h5 { display: none; }
#servicios .service-overlay .detail-item,
#servicios .service-overlay .service-remote-note {
  margin: 0; padding: 0; border-top: 1px solid rgba(255,255,255,.13);
}
#servicios .service-overlay .detail-item:first-of-type { border-top: 0; }
#servicios .service-overlay .detail-item > strong,
#servicios .service-overlay .service-remote-note > strong {
  position: relative; display: block; padding: 16px 27px 16px 0;
  cursor: pointer; font-weight: 300;
}
#servicios .service-overlay .detail-item > strong::after,
#servicios .service-overlay .service-remote-note > strong::after {
  content: '+'; position: absolute; right: 2px; top: 50%;
  transform: translateY(-50%); font-size: 1.2rem; font-weight: 300;
}
#servicios .service-overlay .detail-item.detail-open > strong::after,
#servicios .service-overlay .service-remote-note.detail-open > strong::after { content: '−'; }
#servicios .service-overlay .detail-item > span,
#servicios .service-overlay .service-remote-note > span {
  display: none; margin: 0; padding: 0 16px 17px 0;
}
#servicios .service-overlay .detail-item.detail-open > span,
#servicios .service-overlay .service-remote-note.detail-open > span { display: block; }
#servicios .service-overlay strong[role="button"]:focus-visible {
  outline: 1px solid #ddd; outline-offset: 3px;
}


/* =====================================================
   CONTACTO Y FOOTER — DISEÑO EDITORIAL MÓVIL
   Mantiene intactos formulario, Formspree y JavaScript
   ===================================================== */
@media (max-width: 768px) {
  #contacto.contact-section { padding: 76px 20px 66px; overflow: visible; }
  #contacto .contact-container { width: 100%; max-width: 520px; margin: 0 auto; }
  #contacto .contact-header { margin-bottom: 30px; text-align: center; }
  #contacto .contact-header .subtitle { font-size: .62rem; letter-spacing: 3px; }
  #contacto .contact-header h2 { font-size: 1.18rem; font-weight: 300; letter-spacing: 2px; margin-bottom: 17px; }
  #contacto .contact-header p { max-width: 330px; font-size: .83rem; line-height: 1.8; }
  #contacto .contact-grid { display: flex; flex-direction: column; gap: 0; min-width: 0; }
  #contacto .contact-form-wrapper {
    order: 1; width: 100%; min-width: 0; padding: 24px 18px 28px;
    background: #252727; border: 1px solid rgba(255,255,255,.10);
  }
  #contacto #contactForm, #contacto .form-group { width: 100%; min-width: 0; }
  #contacto .form-group { margin-bottom: 14px; }
  #contacto #contactForm input, #contacto #contactForm textarea {
    display: block; width: 100%; min-width: 0; max-width: 100%;
    box-sizing: border-box; padding: 17px 14px; border: 1px solid #515555;
    border-radius: 0; background: #303333; color: #fff;
    font-family: Helvetica, Arial, sans-serif; font-size: 16px;
    font-weight: 300; letter-spacing: .6px; line-height: 1.45;
  }
  #contacto #contactForm textarea { min-height: 125px; resize: vertical; }
  #contacto #contactForm input::placeholder, #contacto #contactForm textarea::placeholder {
    color: #c6c6c6; opacity: 1; font-size: .72rem; letter-spacing: 1px;
  }
  #contacto #contactForm input:focus, #contacto #contactForm textarea:focus {
    outline: 1px solid #f1f1f1; outline-offset: 0;
  }
  #contacto .submit-btn { width: 100%; min-height: 54px; padding: 17px 12px;
    background: #f1f1f1; color: #252727; font-size: .72rem;
    font-weight: 400; letter-spacing: 2px; }
  #contacto .draft-status { top: 6px; right: 10px; font-size: .62rem; }
  #contacto .contact-info-col { order: 2; gap: 0; align-items: center;
    margin-top: 30px; padding-top: 22px; border-top: 1px solid #454747; }
  #contacto .info-item { display: flex; justify-content: center; align-items: center;
    gap: 12px; width: 100%; max-width: 100%; padding: 11px 0; border: 0; }
  #contacto .info-icon { flex: 0 0 20px; width: 20px; font-size: .94rem; }
  #contacto .info-content { min-width: 0; }
  #contacto .info-content p { margin: 0; font-size: .78rem; font-weight: 300;
    letter-spacing: .25px; text-align: left; overflow-wrap: anywhere; }

  .main-footer { padding: 55px 22px 28px; background: #252727; text-align: center; }
  .main-footer .footer-grid { display: flex; flex-direction: column;
    align-items: center; gap: 0; margin: 0; }
  .main-footer .footer-logo-col { display: flex; flex-direction: column;
    align-items: center; width: 100%; }
  .main-footer .footer-logo-col img { display: block; height: auto !important;
    width: 105px; max-height: 100px; object-fit: contain; margin: 0 auto 16px; }
  .main-footer .footer-mobile-brand { display: block; }
  .main-footer .footer-mobile-brand h3 { margin: 0; font-size: 1rem;
    font-weight: 300; letter-spacing: 2px; color: #fff; }
  .main-footer .footer-mobile-brand p { margin: 9px 0 0; color: #bcbcbc;
    font-size: .66rem; letter-spacing: 1.5px; line-height: 1.6; }
  .main-footer .footer-info-col { width: 100%; max-width: 350px; margin: 24px auto 0; }
  .main-footer .footer-info-col p { text-align: center; color: #bcbcbc;
    font-size: .76rem; line-height: 1.8; font-weight: 300; }
  .main-footer .explore-col { display: none; }
  .main-footer .footer-social-section { width: 100%; max-width: 360px;
    margin: 28px auto 0; padding: 26px 0 24px; }
  .main-footer .footer-social-section::before { width: 100%; background: #515353; }
  .main-footer .footer-social-section h5 { display: none; }
  .main-footer .social-row { display: flex; justify-content: center;
    align-items: center; gap: 27px; flex-wrap: nowrap; }
  .main-footer .social-item { display: inline-flex; justify-content: center;
    align-items: center; width: 38px; min-width: 38px; min-height: 44px;
    font-size: 0; line-height: 1; color: #f1f1f1; }
  .main-footer .social-item i { font-size: 1.35rem; }
  .main-footer .footer-mobile-email { display: inline-flex; }
  .main-footer .footer-mobile-email span { display: none; }
  .main-footer .footer-bottom { width: 100%; margin-top: 3px;
    padding-top: 24px; border-top: 1px solid #515353; }
  .main-footer .footer-copyright { max-width: 290px; margin: 0 auto;
    color: #bcbcbc; opacity: 1; font-size: .59rem; line-height: 1.9;
    font-weight: 300; letter-spacing: .6px; text-align: center; }
}


/* =====================================================
   QUIÉNES SOMOS — COMPOSICIÓN CENTRADA MÓVIL
   Título del mismo tamaño y geometría de fondo
   ===================================================== */
#estudio.estudio-editorial {
    padding: 48px 25px 75px;
    text-align: left;
    overflow: hidden;
}
#estudio .estudio-layout {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 28px;
}
#estudio .estudio-heading {
    position: relative;
    min-height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    isolation: isolate;
}
#estudio .estudio-heading-content {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 0;
    text-align: center;
}
#estudio .estudio-eyebrow {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    font-size: .65rem;
    letter-spacing: 4px;
    white-space: nowrap;
}
#estudio .estudio-eyebrow::before,
#estudio .estudio-eyebrow::after {
    content: "";
    display: block;
    width: 30px;
    height: 1px;
    flex: 0 0 30px;
    background: rgba(255,255,255,.65);
}
#estudio h2 {
    margin: 24px 0 0;
    padding: 0;
    text-align: center;
    font-size: 1.2rem;
    font-weight: 300;
    letter-spacing: 2px;
    line-height: 1.35;
}
#estudio .estudio-geometria {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
#estudio .estudio-circulo {
    position: absolute;
    width: 190px;
    height: 190px;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    border: 7px solid rgba(226,145,65,.42);
    border-radius: 50%;
}
#estudio .estudio-triangulo {
    position: absolute;
    width: 190px;
    height: 205px;
    left: auto;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(170,174,174,.22);
}
#estudio .estudio-descripcion {
    border-left: 0;
    border-top: 1px solid rgba(255,255,255,.55);
    padding: 29px 0 0;
    text-align: left;
}
#estudio .estudio-descripcion p {
    font-size: .95rem;
    line-height: 1.9;
    letter-spacing: .25px;
    margin-bottom: 22px;
    text-align: left;
}
@media (max-width: 360px) {
    #estudio.estudio-editorial {
        padding-left: 21px;
        padding-right: 21px;
    }
    #estudio .estudio-heading { min-height: 225px; }
    #estudio .estudio-eyebrow { gap: 9px; letter-spacing: 3px; }
    #estudio .estudio-eyebrow::before,
    #estudio .estudio-eyebrow::after { width: 24px; flex-basis: 24px; }
}

/* =====================================================
   OBRAS DESTACADAS — TARJETAS SIMPLES CON ZÓCALO
   Solo móviles; no modifica la versión de escritorio.
   ===================================================== */
#obras-destacadas .gallery-grid-4-vertical {
    gap: 26px;
    margin: 36px auto 42px;
    align-items: stretch;
}
#obras-destacadas .portfolio-item-vertical {
    position: relative;
    width: 100%;
    max-width: 420px;
    height: auto;
    aspect-ratio: 4 / 4.1;
    margin: 0 auto;
    background: #252727;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
}
#obras-destacadas .reveal-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 72px;
    width: auto;
    height: auto;
    overflow: hidden;
    background: #252727;
}
#obras-destacadas .reveal-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: none;
}
#obras-destacadas .obra-top-info {
    position: absolute;
    top: auto;
    left: 18px;
    right: 18px;
    bottom: 37px;
    z-index: 5;
}
#obras-destacadas .obra-title-top {
    margin: 0;
    color: #fff;
    font-family: Helvetica, Arial, sans-serif;
    font-size: .82rem;
    font-weight: 400;
    letter-spacing: 2.2px;
    line-height: 1.4;
    text-align: left;
    transform: none;
}
#obras-destacadas .portfolio-item-vertical:hover .obra-title-top {
    transform: none;
}
#obras-destacadas .obra-bottom-info {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 13px;
    z-index: 5;
    line-height: 1.3;
}
/* El HTML actual solo trae la marca; mostramos un descriptor general
   hasta que se incorporen descripciones individuales al HTML. */
#obras-destacadas .brand-vertical { display: none; }
#obras-destacadas .obra-bottom-info::after {
    content: "PROYECTO ARQUITECTÓNICO";
    display: block;
    color: #c7c7c7;
    font-size: .62rem;
    font-weight: 300;
    letter-spacing: 1.8px;
    text-align: left;
}
#obras-destacadas .portfolio-item-vertical::after,
#obras-destacadas .reveal-overlay,
#obras-destacadas .portfolio-vertical-overlay { display: none; }
@media (max-width: 360px) {
    #obras-destacadas .obra-title-top { font-size: .76rem; }
    #obras-destacadas .obra-bottom-info::after { font-size: .57rem; }
}


/* =====================================================
   PALETA UNIFICADA — MÓVIL
   Respeta la alternancia de fondos de escritorio.
   ===================================================== */
#estudio.estudio-editorial { background-color: var(--grafito); }
#servicios.services-section { background-color: var(--grafito-oscuro); }
#obras-destacadas.gallery-section { background-color: var(--grafito); }
#contacto.contact-section { background-color: var(--grafito-oscuro); }
.main-footer { background-color: var(--grafito); }

/* Contacto: uniformidad tipográfica y legibilidad en celulares */
#contacto .info-content,
#contacto .info-content p,
#contacto .info-content a {
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 300;
    letter-spacing: .35px;
    line-height: 1.65;
}
#contacto .info-content p { font-size: .78rem; }
#contacto .info-content { min-width: 0; }
#contacto .info-content a { overflow-wrap: anywhere; }

/* QUIÉNES SOMOS — logo original lateral, solo móviles */
#estudio .estudio-logo-original {
    width: 225px; max-width: none; height: auto;
    left: -55px; right: auto; top: 50%;
    transform: translateY(-50%); opacity: .40;
}
@media (max-width: 360px) {
    #estudio .estudio-logo-original { width: 205px; left: -54px; }
}