de Hello Elementor va a ancho completo para que el hero y la banda CTA lleguen a los bordes; el ancho de lectura lo pone .container. */ body.ve-ficha .site-main, body.ve-entrada .site-main { max-width: none; width: 100%; padding-inline: 0; margin-inline: 0; } /* ---------- Hero de ficha (banda oscura con destello verde) ---------- */ .ficha__hero { position: relative; background: var(--ve-oscuro); color: #eaf1f6; padding: 44px 0 52px; overflow: hidden; } .ficha__hero::before { content: ""; position: absolute; top: -40%; right: -10%; width: 620px; height: 620px; background: radial-gradient(circle, rgba(18,161,80,.35) 0%, rgba(18,161,80,0) 62%); pointer-events: none; } .ficha__hero-inner { position: relative; z-index: 1; } .ficha__hero-main { max-width: 760px; } .ficha__badge { display: inline-block; font-family: var(--ve-fuente-ui); font-weight: 700; font-size: .72rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ve-verde-badge); background: rgba(18,161,80,.14); border: 1px solid rgba(127,224,166,.28); padding: 5px 14px; border-radius: 999px; margin-bottom: 16px; } .ficha__hero .ficha__h1 { font-size: clamp(1.9rem, 4vw, 2.9rem); font-weight: 800; letter-spacing: -.02em; color: #fff; margin: 0 0 16px; } .ficha__lead { font-size: 1.12rem; color: #c4d2dd; max-width: 640px; } .ficha__lead p { margin: 0 0 12px; } .ficha__hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; } /* Nota informativa de cumplimiento en el hero (bajo el CTA, above the fold). */ .ficha__disclaimer { margin: 20px 0 0; max-width: 680px; padding: 11px 14px; font-size: 13px; line-height: 1.5; color: #d7e2ea; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16); border-radius: 10px; } .ficha__disclaimer strong { color: #fff; } /* Banda legal global en el pie (todas las páginas, vía wp_footer). */ .ve-legal-band { background: #0f171d; color: #9fb0bd; padding: 18px 0; border-top: 1px solid rgba(255, 255, 255, .08); } .ve-legal-band p { margin: 0; font-size: 12.5px; line-height: 1.6; text-align: center; } /* ---------- Layout: columna de lectura + barra lateral ---------- */ .ficha__layout { display: grid; grid-template-columns: minmax(0, 1fr) 288px; gap: 56px; align-items: start; padding: 48px 24px 8px; } .ficha__main { max-width: 760px; min-width: 0; } .ficha__sidebar { position: sticky; top: 96px; order: 2; display: grid; gap: 20px; } /* ---------- Secciones de contenido ---------- */ .ficha__section { margin: 0 0 40px; scroll-margin-top: 96px; } .ficha__h2 { font-size: clamp(1.35rem, 2.4vw, 1.7rem); font-weight: 700; letter-spacing: -.01em; margin: 0 0 16px; padding-left: 14px; border-left: 4px solid var(--ve-verde); } .ficha__prose p { margin: 0 0 14px; } .ficha__prose ul, .ficha__prose ol { margin: 0 0 14px; padding-left: 22px; } .ficha__prose li { margin: 0 0 6px; } .ficha__prose a { text-decoration: underline; } /* el color lo pone Estilo del tema → Enlaces */ /* ---------- CTA en línea (recuadro con degradado verde) ---------- */ .inline-cta { margin: 22px 0 6px; background: linear-gradient(120deg, var(--ve-bg-verde), #f2fbf6); border: 1px solid var(--ve-borde); border-left: 4px solid var(--ve-verde); border-radius: var(--ve-radio-sm); padding: 18px 20px; } .inline-cta a.btn { margin: 0; } /* CTA por shortcode: contenedor neutro, sin la caja verde. El shortcode (Elementor, [ve_cta] u otro) pone su propio aspecto; aquí solo se controla el espaciado. */ .inline-cta--custom { margin: 22px 0 6px; background: none; border: 0; padding: 0; } /* ---------- Índice "En esta página" ---------- */ .indice { background: var(--ve-blanco); border: 1px solid var(--ve-borde); border-radius: var(--ve-radio); padding: 18px 20px; box-shadow: var(--ve-sombra-card); } .indice__title { font-family: var(--ve-fuente-ui); font-weight: 700; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ve-gris); margin: 0 0 12px; } .indice__list { list-style: none; margin: 0; padding: 0; } .indice__list li { margin: 0; } .indice__list a { display: block; padding: 7px 0 7px 14px; border-left: 2px solid var(--ve-borde); color: var(--ve-texto); font-size: .92rem; line-height: 1.4; } .indice__list a:hover { border-left-color: var(--ve-verde); color: var(--ve-verde-osc); text-decoration: none; } /* ---------- Datos clave (tarjeta) ---------- */ .datos-card { background: linear-gradient(180deg, #ffffff, var(--ve-bg-claro)); border: 1px solid var(--ve-borde); border-radius: var(--ve-radio); padding: 20px 22px; box-shadow: var(--ve-sombra-card); } .datos-card__title { font-family: var(--ve-fuente-tit); font-weight: 700; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ve-verde-osc); margin: 0 0 12px; } .datos-card__list { margin: 0; } .datos-card__row { padding: 10px 0; border-top: 1px solid var(--ve-borde-2); } .datos-card__row:first-child { border-top: 0; padding-top: 0; } .datos-card__row dt { font-size: .78rem; color: var(--ve-gris); margin: 0 0 2px; } .datos-card__row dd { margin: 0; font-family: var(--ve-fuente-ui); font-weight: 600; color: var(--ve-oscuro); font-size: .98rem; } /* ---------- Visados (listado en ficha de país) ---------- */ /* Dos columnas y tarjeta amplia, como en el diseño. Misma tarjeta para el visado con ficha propia (enlazada) y para el que se explica aquí mismo (sin enlace). */ .visados-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 22px; } .visado-card { display: flex; flex-direction: column; border: 1px solid var(--ve-borde); border-radius: 16px; padding: 30px; background: var(--ve-blanco); box-shadow: 0 8px 24px -18px rgba(14,36,54,.25); transition: box-shadow .2s ease, transform .2s ease; } a.visado-card:hover { text-decoration: none; box-shadow: 0 18px 40px -22px rgba(14,36,54,.35); transform: translateY(-3px); } .visado-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; } .visado-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 11px; background: var(--ve-bg-verde); color: var(--ve-verde); font-size: 22px; line-height: 1; flex: 0 0 auto; } .visado-card__badge { align-self: center; font-family: var(--ve-fuente-ui); font-size: 11px; font-weight: 600; letter-spacing: .05em; padding: 5px 11px; border-radius: 999px; white-space: nowrap; color: var(--ve-verde); background: var(--ve-bg-verde); } .visado-card__badge.is-media { color: #6b7480; background: var(--ve-borde-2); } .visado-card__cat { font-family: var(--ve-fuente-ui); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ve-verde-link); margin: 0 0 6px; } .visados-grid .visado-card__title { font-size: 1.3rem; font-weight: 700; margin: 0 0 4px; color: var(--ve-oscuro); } .visado-card__oficial { font-size: .82rem; font-style: italic; color: #7a8a80; margin: 0 0 14px; } .visado-card__desc { font-size: .92rem; line-height: 1.6; color: #525a64; margin: 0 0 18px; flex: 1 1 auto; } .visado-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--ve-borde-2); } .visado-card__auth { font-size: .78rem; color: #7a8a80; } .visado-card__more { font-family: var(--ve-fuente-ui); font-weight: 600; font-size: .9rem; color: var(--ve-verde); white-space: nowrap; } /* Sin página propia: misma tarjeta, pero no debe insinuar que se puede pulsar. */ .visado-card--info { background: var(--ve-bg-claro); box-shadow: none; } .visado-card--info .visado-card__icon { background: var(--ve-blanco); } @media (max-width: 600px) { .visados-grid { grid-template-columns: 1fr; } .visado-card { padding: 24px; } } /* ---------- FAQs (acordeón) ---------- */ .faqs__list { border-top: 1px solid var(--ve-borde); } .faq { border-bottom: 1px solid var(--ve-borde); } .faq__q { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-family: var(--ve-fuente-tit); font-weight: 600; font-size: 1.02rem; cursor: pointer; padding: 18px 0; color: var(--ve-oscuro); list-style: none; } .faq__q::-webkit-details-marker { display: none; } /* La pregunta es un

por estructura/SEO; se resetea para que no herede márgenes ni tamaño de los títulos del tema y se vea como el summary. / .faqq-text { margin: 0; font: inherit; color: inherit; line-height: inherit; } .faqplus { flex: 0 0 auto; font-size: 1.4rem; line-height: 1; color: var(--ve-verde); transition: transform .2s ease; } .faq[open] .faqplus { transform: rotate(45deg); } .faqa { padding: 0 0 18px; color: var(--ve-texto); } .faqa p { margin: 0 0 10px; } / ---------- Relacionados ---------- / .relacionadoslist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px 24px; } .relacionadoslist li { padding-left: 18px; position: relative; } .relacionadoslist li::before { content: "→"; position: absolute; left: 0; color: var(--ve-verde); font-weight: 700; } .fichavolver { margin: 30px 0 0; font-family: var(--ve-fuente-ui); font-weight: 600; } .fichavolver a { color: var(--ve-verde-osc); } / ---------- CTA final (banda oscura a ancho completo) ---------- / .cta-band { background: var(--ve-oscuro); position: relative; overflow: hidden; margin-top: 40px; } .cta-band::before { content: ""; position: absolute; bottom: -50%; left: 8%; width: 520px; height: 520px; background: radial-gradient(circle, rgba(18,161,80,.28) 0%, rgba(18,161,80,0) 62%); pointer-events: none; } .cta-bandinner { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; padding: 46px 24px; } .cta-band .cta-bandtitle { color: #fff; font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 8px; } .cta-bandlead { color: #b9c8d4; max-width: 560px; margin: 0; } .cta-bandbtn { flex: 0 0 auto; } / ---------- Imágenes de bloque ---------- / .fichamedia { margin: 0 0 18px; } .fichamedia img, .fichaimg { display: block; width: 100%; height: auto; border-radius: var(--ve-radio-sm); } .fichamedia--inicio { margin: 4px 0 22px; } .fichamedia--debajo { margin: 24px 0 4px; } .fichamedia-wrap { display: flex; gap: 26px; align-items: flex-start; } .fichamedia-wrap .fichamedia { flex: 0 0 42%; max-width: 42%; margin: 0; } .fichamedia-wrap .fichaprose { flex: 1 1 auto; min-width: 0; } .fichasection--media-derecha .fichamedia-wrap { flex-direction: row-reverse; } / ---------- Home placeholder ---------- / .home-hero { padding: 70px 0; background: var(--ve-bg-claro); text-align: center; } .home-herotitle { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 0 0 12px; } .home-herolead { font-size: 1.15rem; color: var(--ve-gris); margin: 0 0 24px; } / ---------- Listado del blog ---------- / .site-content { padding: 40px 24px 60px; max-width: var(--ve-ancho); margin: 0 auto; } .page-title { font-size: clamp(1.7rem, 3.4vw, 2.3rem); margin: 0 0 28px; } .post-list { display: grid; gap: 4px; } .post-card { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: start; border-bottom: 1px solid var(--ve-borde); padding: 26px 0; } .post-card:last-child { border-bottom: 0; } .post-card--sin-img { grid-template-columns: 1fr; } .post-cardimg { display: block; border-radius: var(--ve-radio-sm); overflow: hidden; } .post-cardimg img { display: block; width: 100%; height: 140px; object-fit: cover; } .post-cardmeta { font-size: .82rem; color: var(--ve-gris); margin: 0 0 6px; } .post-cardcat { font-weight: 600; color: var(--ve-verde-link); } .post-cardsep { margin: 0 6px; color: var(--ve-borde); } .post-cardtitle { margin: 0 0 8px; font-size: 1.25rem; line-height: 1.3; } .post-cardtitle a { color: var(--ve-oscuro); } .post-cardtitle a:hover { color: var(--ve-verde-link); text-decoration: none; } .post-cardexcerpt { color: var(--ve-verde-grisaceo); } .post-cardexcerpt p { margin: 0 0 8px; } .post-cardmore { font-weight: 600; font-size: .92rem; } / ---------- Entrada del blog ---------- / .entradameta { font-size: .95rem; color: var(--ve-gris-azul); margin: 18px 0 0; } .entradameta-sep { margin: 0 8px; opacity: .5; } .entradabody { max-width: 780px; padding-top: 40px; padding-bottom: 20px; } .entradaportada { margin: 0 0 30px; } .entradaportada img { width: 100%; border-radius: var(--ve-radio); display: block; } / La prosa del blog es más larga que la de una ficha: se le da algo más de aire. / .entradaprose { font-size: 1.05rem; } .entradaprose h2 { font-family: var(--ve-fuente-tit); font-size: clamp(1.3rem, 2.3vw, 1.6rem); font-weight: 700; margin: 38px 0 14px; padding-left: 14px; border-left: 4px solid var(--ve-verde); scroll-margin-top: 96px; } .entradaprose h3 { font-size: 1.15rem; margin: 28px 0 10px; } .entradaprose p { margin: 0 0 16px; } .entradaprose img { border-radius: var(--ve-radio-sm); margin: 20px 0; } .entradaprose blockquote { margin: 24px 0; padding: 4px 0 4px 20px; border-left: 4px solid var(--ve-verde); color: var(--ve-verde-grisaceo); font-style: italic; } .entradaprose table { width: 100%; border-collapse: collapse; margin: 22px 0; font-size: .95rem; } .entradaprose th, .entradaprose td { border: 1px solid var(--ve-borde); padding: 10px 12px; text-align: left; } .entradaprose th { background: var(--ve-bg-claro); font-family: var(--ve-fuente-ui); } .entradatags { display: flex; flex-wrap: wrap; gap: 8px; margin: 32px 0 0; } .entradatag { font-size: .82rem; background: var(--ve-bg-claro); border: 1px solid var(--ve-borde); border-radius: 999px; padding: 4px 12px; color: var(--ve-verde-grisaceo); } .entradatag:hover { background: var(--ve-bg-verde); text-decoration: none; } .entradacta { margin: 40px 0 0; background: linear-gradient(120deg, var(--ve-bg-verde), #f2fbf6); border: 1px solid var(--ve-borde); border-left: 4px solid var(--ve-verde); border-radius: var(--ve-radio); padding: 26px 28px; } .entradacta-title { font-size: 1.2rem; margin: 0 0 8px; } .entradacta p { margin: 0 0 16px; color: var(--ve-verde-grisaceo); } / ---------- Relacionadas ---------- / .relacionadas { margin: 52px 0 10px; } .relacionadasgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .relacionadascard { display: block; border: 1px solid var(--ve-borde); border-radius: var(--ve-radio); overflow: hidden; background: var(--ve-blanco); box-shadow: var(--ve-sombra-card); transition: box-shadow .15s ease, transform .15s ease; } .relacionadascard:hover { box-shadow: var(--ve-sombra); transform: translateY(-2px); text-decoration: none; } .relacionadasimg { display: block; } .relacionadasimg img { display: block; width: 100%; height: 120px; object-fit: cover; } .relacionadastitulo { display: block; font-family: var(--ve-fuente-tit); font-weight: 700; color: var(--ve-oscuro); line-height: 1.3; padding: 14px 16px 6px; } .relacionadasfecha { display: block; font-size: .8rem; color: var(--ve-gris); padding: 0 16px 16px; } / ---------- Pie ---------- / .site-footer { background: var(--ve-oscuro-mas); color: #b9c8d4; margin-top: 0; } .site-footerinner { display: flex; flex-wrap: wrap; gap: 40px; justify-content: space-between; padding: 48px 24px; } .site-footername { font-family: var(--ve-fuente-tit); font-weight: 800; color: #fff; font-size: 1.2rem; } .site-footertagline { max-width: 360px; margin: 10px 0 0; font-size: .92rem; } .site-footermenu { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .site-footermenu a { color: #b9c8d4; } .site-footermenu a:hover { color: #fff; } .site-footerlegal { border-top: 1px solid rgba(255,255,255,.08); font-size: .82rem; } .site-footerlegal .container { padding: 18px 24px; } / ---------- Responsive ---------- / @media (max-width: 960px) { .fichalayout { grid-template-columns: 1fr; gap: 34px; padding-top: 36px; } .fichasidebar { position: static; top: auto; order: 0; grid-template-columns: 1fr; } .fichamain { max-width: none; } } @media (max-width: 860px) { .site-headerinner { flex-wrap: wrap; min-height: 0; padding-top: 12px; padding-bottom: 12px; gap: 12px; } .site-nav { margin-left: 0; width: 100%; order: 3; } .site-navmenu { flex-wrap: wrap; gap: 12px 18px; } .site-headercta { margin-left: auto; } .fichahero { padding: 34px 0 40px; } .cta-bandinner { flex-direction: column; align-items: flex-start; } .fichamedia-wrap, .fichasection--media-derecha .fichamedia-wrap { flex-direction: column; gap: 14px; } .fichamedia-wrap .fichamedia { flex-basis: auto; max-width: 100%; } } @media (max-width: 780px) { .relacionadasgrid { grid-template-columns: 1fr; } .relacionadasimg img { height: 160px; } } @media (max-width: 640px) { .post-card { grid-template-columns: 1fr; gap: 14px; } .post-cardimg img { height: 180px; } .entradabody { padding-top: 28px; } .entradacta { padding: 20px; } } / ---------- Recuadro de autoría (E-E-A-T) ---------- / .autor-card { margin: 8px 0 0; border: 1px solid var(--ve-borde); border-radius: 14px; overflow: hidden; background: #fff; } .autor-cardeyebrow { margin: 0; padding: 14px 24px; font-family: var(--ve-fuente-ui); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ve-verde-osc); background: var(--ve-bg-claro); border-bottom: 1px solid var(--ve-borde); } .autor-cardbody { display: flex; gap: 22px; padding: 22px 24px; } .autor-cardphoto { flex: 0 0 auto; } .autor-cardimg, .autor-cardph { width: 96px; height: 96px; border-radius: 12px; object-fit: cover; display: flex; align-items: center; justify-content: center; } .autor-cardph { background: var(--ve-bg-verde); color: var(--ve-verde); font-family: var(--ve-fuente-tit); font-weight: 800; font-size: 2rem; } .autor-cardmain { min-width: 0; } .autor-cardname { font-size: 1.25rem; margin: 0 0 2px; } .autor-cardname a { color: inherit; } .autor-cardrole { margin: 0 0 10px; color: var(--ve-gris); font-size: .95rem; } .autor-cardrole strong { color: var(--ve-oscuro); } .autor-cardbio { margin: 0 0 14px; color: var(--ve-verde-grisaceo); font-size: .96rem; line-height: 1.6; } .autor-cardbadges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } .autor-badge { font-family: var(--ve-fuente-ui); font-size: 12.5px; font-weight: 600; padding: 6px 13px; border-radius: 999px; } .autor-badge.is-verde { color: var(--ve-verde-osc); background: var(--ve-bg-verde); } .autor-badge.is-neutro { color: var(--ve-gris); background: #fff; border: 1px solid var(--ve-borde); } .autor-cardfoot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; padding-top: 14px; border-top: 1px solid var(--ve-borde-2); font-size: .9rem; color: var(--ve-gris); } .autor-cardfoot strong { color: var(--ve-oscuro); font-weight: 600; } .autor-cardcontact { font-family: var(--ve-fuente-ui); font-weight: 600; color: var(--ve-verde); } @media (max-width: 640px) { .autor-cardbody { flex-direction: column; gap: 16px; } .autor-cardimg, .autor-cardph { width: 72px; height: 72px; } } / ---------- Página propia del autor ---------- / .autor-pageid { display: flex; align-items: center; gap: 22px; } .autor-pageimg, .autor-pageph { width: 120px; height: 120px; border-radius: 14px; object-fit: cover; display: flex; align-items: center; justify-content: center; } .autor-pageph { background: rgba(127,224,166,.16); color: var(--ve-verde-badge); font-family: var(--ve-fuente-tit); font-weight: 800; font-size: 2.6rem; } .autor-pagerole { color: #c4d2dd; margin: 6px 0 0; } .autor-pagerole strong { color: #fff; } .autor-pagebody { max-width: 760px; padding: 40px 24px 8px; } .autor-pagebio { font-size: 1.12rem; line-height: 1.7; color: var(--ve-verde-grisaceo); } .autor-pagebadges { margin: 18px 0; } .autor-pagelist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .autor-pagelist a { display: block; padding: 12px 16px; border: 1px solid var(--ve-borde); border-radius: 10px; color: var(--ve-oscuro); font-family: var(--ve-fuente-ui); font-weight: 500; } .autor-pagelist a:hover { border-color: #cfe9d9; text-decoration: none; background: var(--ve-bg-claro); } @media (max-width: 640px) { .autor-pageid { flex-direction: column; align-items: flex-start; gap: 14px; } .autor-pageimg, .autor-pageph { width: 84px; height: 84px; } } / Shortcode libre al final de la ficha (país/visado) / .fichashortcode-final { margin: 0 0 8px; } / ===================================================== FORMULARIO DE CONTACTO — VISADOS EMPRESAS ===================================================== / .ve-contact-form { --ve-green: #12a150; --ve-green-light: #e7f5ec; --ve-navy: #0e2436; --ve-text: #454d45; --ve-muted: #6a7a70; --ve-border: #dfe5da; --ve-background-soft: #f6f8f4; --ve-error: #c62828; display: flex; flex-direction: column; gap: 22px; width: 100%; } .ve-contact-form , .ve-contact-form ::before, .ve-contact-form ::after { box-sizing: border-box; } /* ---------- Distribución de campos ---------- / .ve-contact-formgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .ve-contact-formfield { display: flex; flex-direction: column; gap: 7px; min-width: 0; } .ve-contact-formfield--full { grid-column: 1 / -1; } .ve-contact-formfield label, .ve-contact-formchoice legend { margin: 0; padding: 0; font-family: "Archivo", sans-serif; font-size: 13.5px; font-weight: 600; line-height: 1.4; color: var(--ve-navy); } .ve-required { color: var(--ve-green); } / El span generado automáticamente por Contact Form 7 / .ve-contact-form .wpcf7-form-control-wrap { display: block; width: 100%; } / ---------- Inputs y textarea ---------- / .ve-contact-form input[type="text"], .ve-contact-form input[type="email"], .ve-contact-form input[type="tel"], .ve-contact-form textarea, .ve-contact-form select { display: block; width: 100%; min-height: 48px; margin: 0; padding: 13px 15px; border: 1px solid var(--ve-border); border-radius: 9px; outline: none; background-color: #ffffff; color: var(--ve-navy); font-family: inherit; font-size: 15.5px; font-weight: 400; line-height: 1.4; box-shadow: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .ve-contact-form textarea { min-height: 140px; line-height: 1.6; resize: vertical; } .ve-contact-form input::placeholder, .ve-contact-form textarea::placeholder { color: #87918a; opacity: 1; } .ve-contact-form input[type="text"]:hover, .ve-contact-form input[type="email"]:hover, .ve-contact-form input[type="tel"]:hover, .ve-contact-form textarea:hover, .ve-contact-form select:hover { border-color: #c4cec0; } .ve-contact-form input[type="text"]:focus, .ve-contact-form input[type="email"]:focus, .ve-contact-form input[type="tel"]:focus, .ve-contact-form textarea:focus, .ve-contact-form select:focus { border-color: var(--ve-green); box-shadow: 0 0 0 3px rgba(18, 161, 80, 0.12); } / ---------- Selector de urgencia ---------- / .ve-contact-formchoice { margin: 0; padding: 0; border: 0; } .ve-contact-formchoice legend { margin-bottom: 12px; } .ve-contact-formchoice .wpcf7-radio { display: flex; flex-wrap: wrap; gap: 12px; } .ve-contact-formchoice .wpcf7-list-item { margin: 0; } .ve-contact-formchoice .wpcf7-list-item label { display: flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; padding: 10px 14px; border: 1px solid var(--ve-border); border-radius: 9px; background-color: #ffffff; color: var(--ve-text); font-family: inherit; font-size: 14px; font-weight: 500; line-height: 1.3; cursor: pointer; transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; } .ve-contact-formchoice input[type="radio"] { flex: 0 0 auto; width: 17px; height: 17px; margin: 0; accent-color: var(--ve-green); cursor: pointer; } .ve-contact-formchoice .wpcf7-list-item label:hover { border-color: var(--ve-green); background-color: #f7fcf9; } .ve-contact-formchoice .wpcf7-list-item label:has(input[type="radio"]:checked) { border-color: var(--ve-green); background-color: var(--ve-green-light); color: var(--ve-navy); box-shadow: 0 0 0 1px rgba(18, 161, 80, 0.08); } / ---------- Bloque legal ---------- / .ve-contact-formlegal { display: flex; flex-direction: column; gap: 12px; padding: 20px; border: 1px solid #eaeee6; border-radius: 12px; background-color: var(--ve-background-soft); } .ve-contact-formacceptance { font-size: 14.5px; line-height: 1.55; color: var(--ve-text); } .ve-contact-formacceptance .wpcf7-list-item { display: block; margin: 0; } .ve-contact-formacceptance .wpcf7-list-item label { display: flex; align-items: flex-start; gap: 11px; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; font-size: inherit; font-weight: 400; line-height: inherit; cursor: pointer; } .ve-contact-formacceptance input[type="checkbox"] { flex: 0 0 auto; width: 18px; height: 18px; margin: 2px 0 0; padding: 0; accent-color: var(--ve-green); cursor: pointer; } .ve-contact-formacceptance a { color: var(--ve-green); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .ve-contact-formacceptance a:hover { color: var(--ve-navy); } / ---------- Botón de envío ---------- / .ve-contact-formactions { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; } .ve-contact-form input.ve-contact-formsubmit { display: inline-flex; align-items: center; justify-content: center; width: auto; min-width: 190px; min-height: 52px; margin: 0; padding: 16px 32px; border: 0; border-radius: 9px; background-color: var(--ve-green); color: #ffffff; font-family: "Archivo", sans-serif; font-size: 16px; font-weight: 600; line-height: 1.2; box-shadow: 0 14px 30px -12px rgba(18, 161, 80, 0.7); cursor: pointer; transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .ve-contact-form input.ve-contact-formsubmit:hover { background-color: #0e8a48; transform: translateY(-1px); box-shadow: 0 16px 32px -12px rgba(18, 161, 80, 0.8); } .ve-contact-form input.ve-contact-formsubmit:focus-visible { outline: 3px solid rgba(18, 161, 80, 0.25); outline-offset: 3px; } .ve-contact-form input.ve-contact-formsubmit:disabled { opacity: 0.65; cursor: wait; transform: none; } / Spinner de Contact Form 7 / .ve-contact-form .wpcf7-spinner { margin: 0; background-color: var(--ve-green); } / ---------- Validación y mensajes ---------- / / No ocultamos los errores para que el usuario sepa qué campo debe corregir. / .ve-contact-form .wpcf7-not-valid-tip { display: block; margin-top: 6px; color: var(--ve-error); font-size: 12.5px; line-height: 1.4; } .ve-contact-form .wpcf7-not-valid { border-color: var(--ve-error) !important; } .wpcf7 form .wpcf7-response-output { margin: 20px 0 0; padding: 14px 16px; border: 1px solid #dfe5da; border-radius: 9px; font-size: 14px; line-height: 1.5; } .wpcf7 form.sent .wpcf7-response-output { border-color: #12a150; background-color: #e7f5ec; color: #0e2436; } .wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.failed .wpcf7-response-output, .wpcf7 form.spam .wpcf7-response-output { border-color: #d89a9a; background-color: #fff5f5; color: #8a1c1c; } / ---------- Responsive ---------- */ @media (max-width: 767px) { .ve-contact-form { gap: 20px; } .ve-contact-formgrid { grid-template-columns: 1fr; gap: 18px; } .ve-contact-formfield--full { grid-column: auto; } .ve-contact-formchoice .wpcf7-radio { flex-direction: column; gap: 10px; } .ve-contact-formchoice .wpcf7-list-item, .ve-contact-formchoice .wpcf7-list-item label { width: 100%; } .ve-contact-formlegal { padding: 17px; } .ve-contact-formactions, .ve-contact-form input.ve-contact-form__submit { width: 100%; } }