/* =======================================================================
   ARSAI | HOJA DE ESTILOS UNIFICADA
   =======================================================================
   Sitios: index.html (papelería), digital/index.html (NFC),
           tarjetas/demo/index.html (perfil virtual).

   COLORES
     :root          → identidad azul petróleo, usada por Arsai Digital
     body.home-page → identidad beige de Arsai Papelería
     .digital-teaser → restablece azul petróleo en la sección del inicio

   ORDEN
     01-04 Base y elementos compartidos
     05-12 Página principal y catálogo
     13-14 Arsai Digital y tarjetas virtuales
     15    Ajustes para pantallas pequeñas
   Cada selector conserva sus propiedades en una única línea.
   ======================================================================= */

/* 01  VARIABLES Y COLORES ===================================== */
:root { --ink: #142b39; --ink-deep: #10232f; --ink-soft: #45616c; --accent: #b9896f; --sand: #e8dbd0; --paper: #fbfaf8; --white: #fff; --surface: #f4f4f1; --line: #e4e8e7; --teal: #347b80; --max: 1180px; --radius: 12px; --shadow: 0 20px 50px rgb(16 35 47 / 9%); }
body.home-page { --ink: #443328; --ink-deep: #2F241E; --ink-soft: #705C4B; --accent: #A97752; --sand: #E6CCAE; --paper: #F0E2D0; --white: #FFFDF9; --surface: #F7F0E7; --line: #E5D6C5; --teal: #937358; --shadow: 0 20px 50px rgb(47 36 30 / 12%); }

/* 02  BASE, ACCESIBILIDAD Y CONTENEDORES ====================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 108px; }
body { margin: 0; color: var(--ink); background: var(--white); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 16px; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid #6bc7da; outline-offset: 3px; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin-top: 0; }
.container { width: min(calc(100% - 64px), var(--max)); margin-inline: auto; }
.skip-link { position: absolute; z-index: 1000; left: 16px; top: -100px; padding: 12px 16px; background: white; border-radius: 6px; }
.skip-link:focus { top: 12px; }

/* 03  CABECERA, LOGO Y NAVEGACIÓN ============================= */
.topbar { color: #d8e2e4; background: var(--ink-deep); font-size: 10px; font-weight: 750; letter-spacing: .16em; }
.topbar__inner { display: flex; align-items: center; justify-content: space-between; height: 31px; gap: 20px; }
.site-header { background: var(--white); border-bottom: 1px solid var(--line); position: relative; z-index: 50; }
.nav-wrap { display: flex; min-height: 80px; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 11px; flex-shrink: 0; line-height: 1; }
.home-page .brand { display: inline-flex; align-items: center; gap: 10px; }
.home-page .brand__logo { width: 56px; height: 56px; object-fit: contain; display: block; flex-shrink: 0; }
.brand__name { color: var(--ink); font-weight: 850; font-size: 23px; letter-spacing: .21em; }
.brand__name b { font-size: 10px; font-weight: 750; background: #ecf3f1; color: #35777a; letter-spacing: .04em; padding: 6px; border-radius: 5px; vertical-align: middle; margin-left: -4px; }
.main-nav { display: flex; align-items: center; gap: clamp(17px, 2.2vw, 34px); }
.main-nav a { color: #324b59; font-size: 13px; font-weight: 650; white-space: nowrap; transition: color .2s ease; }
.main-nav a:hover, .footer__links a:hover { color: var(--accent); }
.main-nav a.nav-cta { color: var(--white); background: var(--ink); padding: 12px 18px; border-radius: 7px; }
.main-nav a.nav-cta:hover { color: var(--white); background: #285268; }
.menu-toggle { display: none; width: 44px; height: 43px; border: 1px solid var(--line); border-radius: 8px; background: var(--white); padding: 10px; }
.menu-toggle span { display: block; background: var(--ink); height: 2px; border-radius: 1px; margin: 5px 0; }
.home-page .topbar { color: #F0E2D0; }
.home-page .main-nav a { color: #443328; }
.home-page .main-nav a:hover { color: #A97752; }
.home-page .main-nav a.nav-cta { color: #FFFDF9; }
.home-page .brand__name b { background: #F0E2D0; color: #70513C; }
.brand__symbol { width: 37px; height: 37px; display: grid; place-items: center; color: var(--white); background: var(--ink); border-radius: 10px; font-family: Georgia, serif; font-size: 31px; font-style: italic; letter-spacing: -.12em; padding-right: 5px; padding-bottom: 3px; }
.brand__symbol span { color: #d9b6a0; }
/* Logotipo en cabecera: se usa el mismo archivo en ambas páginas. */
.digital-page .brand__logo { width: 56px; height: 56px; object-fit: contain; display: block; flex-shrink: 0; }

/* 04  BOTONES Y TEXTOS AUXILIARES ============================= */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 20px; min-height: 47px; border: 1px solid transparent; padding: 13px 19px; border-radius: 6px; font-size: 13px; font-weight: 750; line-height: 1.25; transition: background-color .2s ease, border-color .2s ease, transform .2s ease; text-align: center; }
.btn:hover { transform: translateY(-2px); }
.btn--primary { color: var(--white); background: var(--ink); border-color: var(--ink); }
.btn--primary:hover { background: #2a5367; border-color: #2a5367; }
.btn--secondary { color: var(--ink); background: var(--white); border-color: #cbd4d7; }
.btn--secondary:hover { background: #f2f6f6; }
.btn--light { color: var(--ink); background: var(--white); }
.btn--light:hover { background: #eaf3f3; }
.btn--outline-light { color: var(--white); border-color: #77949c; background: transparent; }
.btn--outline-light:hover { background: #ffffff17; }
.eyebrow { display: flex; align-items: center; gap: 9px; color: #a16c52; font-size: 10px; letter-spacing: .18em; font-weight: 850; margin-bottom: 20px; }
.eyebrow__line { display: inline-block; width: 22px; height: 2px; background: var(--accent); }
.eyebrow--light { color: #bbd6d5; }
.home-page .btn--primary:hover, .home-page .main-nav a.nav-cta:hover { background: #654B39; border-color: #654B39; color: #FFFDF9; }

/* 05  PORTADA — ARSAI PAPELERÍA =============================== */
.hero { background: var(--paper); overflow: hidden; }
.hero__grid { min-height: 496px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 7%; padding-block: 45px; }
.hero__copy { padding-block: 20px; }
.hero h1 { max-width: 660px; font-size: clamp(37px, 4.1vw, 57px); letter-spacing: -.052em; font-weight: 820; line-height: 1.13; margin-bottom: 22px; }
.hero h1 span { color: #a67c67; }
.hero__description { max-width: 505px; color: #536972; font-size: 15px; line-height: 1.85; margin-bottom: 24px; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.hero__note { margin: 25px 0 0; color: #7c8d94; font-size: 11px; }
.hero__note span { font-size: 9px; color: var(--teal); margin-right: 5px; }
.hero__showcase { height: 390px; position: relative; isolation: isolate; border-radius: 13px; background: #e6dfd6; overflow: hidden; box-shadow: var(--shadow); }
.showcase__surface { position: absolute; inset: 0; z-index: -2; background: radial-gradient(circle at 76% 20%, #fff7f0 0%, transparent 43%), linear-gradient(145deg, #e5ded5 0%, #b9a99c 100%); }
.showcase__surface::after { content: ""; position: absolute; inset: 60% -25% -25%; background: #bba79a; transform: rotate(-12deg); opacity: .45; }
.showcase__sheet { position: absolute; left: 4%; top: 12%; width: 52%; height: 56%; background: #fefaf4; border: 1px solid #e8ddd0; box-shadow: 0 22px 28px #58473921; transform: rotate(-19deg); padding: 22px; display: flex; justify-content: space-between; align-items: flex-start; color: #9d897d; font-size: 11px; font-weight: 700; }
.showcase__book { position: absolute; left: 22%; top: 13%; width: 43%; height: 78%; color: #fffdf6; background: linear-gradient(150deg, #557679, #254c59 76%); box-shadow: 13px 22px 28px #142b3950; border-radius: 3px 8px 9px 3px; transform: rotate(-12deg); padding: 43px 25px 26px; display: flex; flex-direction: column; align-items: flex-start; }
.showcase__spiral { position: absolute; left: -8px; top: 9%; bottom: 9%; width: 13px; background: repeating-linear-gradient(180deg, transparent 0px, transparent 11px, #e6dfd8 12px, #e6dfd8 17px, transparent 18px, transparent 23px); filter: drop-shadow(1px 1px 2px #0005); }
.showcase__small { font-size: 8px; letter-spacing: .16em; line-height: 1.6; color: #cddcda; }
.showcase__title { font-family: Georgia, serif; font-size: clamp(42px, 4vw, 65px); line-height: 1; margin-top: 56px; letter-spacing: -.04em; }
.showcase__brand { margin-top: auto; font-size: 12px; font-weight: 850; letter-spacing: .17em; }
.showcase__card { position: absolute; width: 43%; height: 33%; right: 6%; bottom: 10%; border-radius: 5px; color: #60493d; background: linear-gradient(125deg,#fff8ed,#d8c4b6); box-shadow: 5px 12px 24px #48392d40; padding: 18px 22px; display: flex; flex-direction: column; justify-content: space-between; transform: rotate(9deg); font-size: 13px; font-weight: 650; }
.showcase__card-logo { font-family: Georgia, serif; font-size: 34px; font-style: italic; }
.showcase__caption { position: absolute; right: 10px; bottom: 8px; color: #fff; font-size: 8px; letter-spacing: .06em; text-shadow: 0 1px 5px #0009; }
.home-page .hero h1 span { color: #A97752; }
.home-page .hero__description { color: #705C4B; }
.home-page .hero__showcase { background: #E6D2BC; }
.home-page .showcase__surface { background: radial-gradient(circle at 76% 20%, #FFF9EF 0%, transparent 43%), linear-gradient(145deg, #EFE0CD, #C6A98C); }
.home-page .showcase__book { background: linear-gradient(150deg, #B38A69, #654833 76%); }
.home-page .showcase__small { color: #F5E8D8; }

/* 06  SECCIONES Y TÍTULOS COMPARTIDOS ========================= */
.section { padding: 86px 0; }
.section-heading { display: flex; gap: 30px; justify-content: space-between; align-items: flex-end; margin-bottom: 31px; }
.section-heading .eyebrow { margin-bottom: 12px; }
.section-heading h2, .inquiry h2 { margin-bottom: 9px; font-size: clamp(29px, 3vw, 40px); letter-spacing: -.04em; line-height: 1.2; }
.section-heading p:not(.eyebrow) { color: #708087; font-size: 14px; line-height: 1.7; margin-bottom: 0; }
.section-count { display: none; color: #9aa7ab; font-size: 10px; font-weight: 800; letter-spacing: .12em; white-space: nowrap; padding-bottom: 7px; }

/* 07  CATÁLOGO DE PAPELERÍA — BASE ============================ */
.product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.product-card { border: 1px solid var(--line); background: white; border-radius: var(--radius); overflow: hidden; transition: box-shadow .2s ease, transform .2s ease; }
.product-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.product-art { height: 224px; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.product-art--agenda { background: linear-gradient(140deg, #d9e5e3, #a4bcb8); }
.product-art--cards { background: #ecddd2; }
.product-art--covers { background: #d4e0dd; }
.product-art--calendar { background: #e8e3d9; }
.product-card__body { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; padding: 20px 19px 21px; min-height: 156px; }
.product-card h3, .faith-card h3, .digital-product h3 { font-size: 15px; font-weight: 800; line-height: 1.4; margin-bottom: 7px; letter-spacing: -.012em; }
.product-card p, .faith-card p, .digital-product p { color: #677981; font-size: 12px; line-height: 1.7; margin-bottom: 0; }
.text-link { font-size: 12px; font-weight: 800; color: #a06a51; display: inline-flex; gap: 4px; align-items: center; width: fit-content; }
.text-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.section-footnote { margin: 17px 0 0; color: #8a999b; font-size: 11px; }

/* 08  CATÁLOGO — EFECTOS 3D INDIVIDUALES ====================== */

/* — AGENDA — */
.home-page .product-art--agenda { position: relative; height: 280px; min-height: 280px; background: transparent; display: flex; align-items: center; justify-content: center; overflow: visible; isolation: isolate; perspective: 1000px; }
.home-page .product-art--agenda::before { content: ""; position: absolute; top: 65px; bottom: 12px; left: 16px; right: 16px; background: linear-gradient(145deg, #F3E8DB, #E3CCB3); border-radius: 18px; box-shadow: 0 12px 28px rgba(68, 51, 40, 0.10); z-index: 0; }
.home-page .product-art--agenda::after { content: ""; position: absolute; bottom: 18px; left: 24%; width: 52%; height: 50px; background: rgba(47, 36, 30, 0.22); filter: blur(12px); border-radius: 50%; z-index: 1; }
.home-page .product-art--agenda .catalogo-imagen { position: relative; z-index: 2; width: 82%; height: 220px; object-fit: contain; display: block; transform: translateY(-6px) rotate(-10deg); filter: drop-shadow(8px 15px 14px rgba(47, 36, 30, 0.20)); transition: transform 0.35s ease, filter 0.35s ease; }
.home-page .product-card:hover .product-art--agenda .catalogo-imagen { transform: translateY(-20px) rotate(0deg) scale(1.03); filter: drop-shadow(10px 22px 20px rgba(47, 36, 30, 0.24)); }

/* — TARJETAS DE PRESENTACIÓN — */
.home-page .product-card--tarjetas { overflow: visible; }
.home-page .product-art--cards { position: relative; height: 280px; min-height: 280px; background: transparent; display: flex; align-items: center; justify-content: center; overflow: visible; isolation: isolate; }
.home-page .product-art--cards::before { content: ""; position: absolute; top: 90px; bottom: 20px; left: 16px; right: 16px; background: linear-gradient(145deg, #F3E8DB, #E3CCB3); border-radius: 18px; box-shadow: 0 12px 28px rgba(68, 51, 40, 0.10); z-index: 0; }
.home-page .product-art--cards::after { content: ""; position: absolute; bottom: 37px; left: 23%; width: 54%; height: 18px; background: rgba(47, 36, 30, 0.18); filter: blur(13px); border-radius: 50%; z-index: 1; }
.home-page .product-art--cards .catalogo-imagen--tarjetas { position: relative; z-index: 2; width: 110%; max-width: 270px; height: auto; max-height: none; flex: 0 0 auto; object-fit: contain; display: block; transform: translateY(-10px); filter: drop-shadow(8px 17px 15px rgba(47, 36, 30, 0.22)); transition: transform 0.35s ease, filter 0.35s ease; }
.home-page .product-card--tarjetas:hover .catalogo-imagen--tarjetas { transform: translateY(-25px) rotate(10deg) scale(1.03); filter: drop-shadow(10px 24px 20px rgba(47, 36, 30, 0.27)); }

/* — CAMBIOS DE TAPA — */
.home-page .product-art--covers { position: relative; height: 280px; min-height: 280px; background: transparent; display: flex; align-items: flex-start; justify-content: center; overflow: visible; isolation: isolate; }
.home-page .product-art--covers::before { content: ""; position: absolute; top: 72px; bottom: 15px; left: 16px; right: 16px; background: linear-gradient(145deg, #F3E8DB, #E3CCB3); border-radius: 18px; box-shadow: 0 12px 28px rgba(68, 51, 40, 0.10); z-index: 0; }
.home-page .product-art--covers::after { content: ""; position: absolute; bottom: 16px; left: 23%; width: 54%; height: 16px; background: rgba(47, 36, 30, 0.18); filter: blur(13px); border-radius: 50%; z-index: 1; }
.home-page .product-art--covers .catalogo-imagen--covers { position: relative; rotate: -10deg; z-index: 2; width: 90%; max-width: 270px; height: 220px; object-fit: contain; display: block; transform: translateY(20px); filter: drop-shadow(8px 15px 14px rgba(47, 36, 30, 0.20)); transition: transform 0.35s ease, filter 0.35s ease; }
.home-page .product-card:hover .product-art--covers .catalogo-imagen--covers { transform: translateY(5px) rotate(10deg) scale(1.03); filter: drop-shadow(10px 22px 20px rgba(47, 36, 30, 0.25)); }

/* — CALENDARIOS — */
.home-page .product-card--calendar { overflow: visible; }
.home-page .product-art--calendar { position: relative; height: 280px; min-height: 280px; background: transparent; display: flex; align-items: center; justify-content: center; overflow: visible; isolation: isolate; }
.home-page .product-art--calendar::before { content: ""; position: absolute; top: 75px; bottom: 15px; left: 16px; right: 16px; background: linear-gradient(145deg, #F3E8DB, #E3CCB3); border-radius: 18px; box-shadow: 0 12px 28px rgba(68, 51, 40, 0.10); z-index: 0; }
.home-page .product-art--calendar::after { content: ""; position: absolute; bottom: 20px; left: 23%; width: 54%; height: 16px; background: rgba(47, 36, 30, 0.18); filter: blur(13px); border-radius: 50%; z-index: 1; }
.home-page .product-art--calendar .catalogo-imagen--calendar { position: relative; rotate: 0deg; z-index: 2; width: 90%; max-width: 270px; height: 240px; object-fit: contain; display: block; transform: translateY(-5px); filter: drop-shadow(8px 15px 14px rgba(47, 36, 30, 0.20)); transition: transform 0.35s ease, filter 0.35s ease; }
.home-page .product-card:hover .catalogo-imagen--calendar { transform: translateY(-22px) rotate(8deg) scale(1.03); filter: drop-shadow(10px 22px 20px rgba(47, 36, 30, 0.25)); }

/* 09  PRODUCTOS CRISTIANOS ==================================== */
.faith { background: var(--paper); }
.faith-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.faith-card { min-width: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.faith-art { height: 207px; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.faith-art--book { background: linear-gradient(120deg,#e5e3da,#cbd0c4); }
.faith-art--book::before { content: ""; position: absolute; background: linear-gradient(150deg,#8b9479,#677d70); width: 145px; height: 182px; transform: rotate(-13deg); box-shadow: 7px 13px 19px #24382c4c; border-radius: 3px; }
.faith-art--book > span { color: #fffdf4; font-family: Georgia, serif; font-size: 27px; line-height: 1.1; transform: rotate(-13deg); text-align: center; z-index: 1; }
.faith-art--book > small { position: absolute; bottom: 26px; font-size: 7px; color: #fff; letter-spacing: .07em; transform: rotate(-13deg); }
.faith-art--mini { background: #e8dbca; gap: 9px; }
.little-book { color: #fbf5eb; width: 117px; height: 157px; transform: rotate(-12deg); background: #4b655d; border-radius: 2px 5px 5px 2px; box-shadow: 6px 10px 13px #3b534a54; display: grid; place-items: center; font-family: Georgia,serif; font-size: 23px; line-height: 1.15; text-align: center; }
.little-book--small { background: #927a6c; width: 80px; height: 110px; transform: rotate(15deg); margin-left: -27px; font-size: 17px; }
.faith-art--color { background: #dce5df; }
.color-sheet { width: 142px; height: 170px; background: #fff9ee; transform: rotate(8deg); box-shadow: 6px 14px 18px #3d534340; padding: 22px 15px; display: flex; flex-direction: column; align-items: center; color: #6f786a; border: 1px solid #e7e1d8; }
.color-sheet > span:first-child { text-align: center; font-family: Georgia, serif; font-size: 19px; line-height: 1.2; }
.color-sheet__flower { font-size: 84px; line-height: 1; margin-top: 2px; color: #bd9980; }
.faith-card__text { padding: 23px 22px 24px; }
.faith-card__text p { min-height: 41px; }
.faith-card__text .text-link { margin-top: 18px; }
.home-page .faith-art--book { background: #E6D8C6; }
.home-page .faith-art--book::before { background: linear-gradient(150deg, #AA8A6B, #725541); }
.home-page .faith-art--color { background: #EFE1CF; }

/* 10  PRESENTACIÓN DE ARSAI DIGITAL EN INICIO ================= */
.digital-teaser { background: var(--ink); color: white; overflow: hidden; }
.digital-teaser__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 10%; align-items: center; }
.digital-teaser h2 { font-size: clamp(39px, 5vw, 62px); letter-spacing: -.05em; line-height: 1.07; margin: 12px 0 21px; }
.digital-teaser h2 em { color: #9fc4c3; font-style: normal; }
.digital-teaser p:not(.eyebrow) { color: #c0d1d6; font-size: 15px; line-height: 1.8; max-width: 560px; }
.digital-teaser__actions { display: flex; gap: 23px; align-items: center; flex-wrap: wrap; margin-top: 27px; }
.digital-teaser__demo { font-size: 12px; font-weight: 700; color: #e8f4f4; }
.digital-teaser__demo:hover { text-decoration: underline; text-underline-offset: 5px; }
.digital-visual { height: 330px; display: flex; align-items: center; justify-content: center; position: relative; }
.digital-visual::before { content: ""; position: absolute; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle,#39798188, transparent 67%); }
.digital-visual__phone { position: relative; width: 194px; height: 326px; background: #fcfdfb; border: 8px solid #1c3a49; border-radius: 25px; box-shadow: 18px 20px 40px #071a25b0; color: var(--ink); display: flex; align-items: center; flex-direction: column; padding: 34px 13px 15px; gap: 10px; transform: rotate(7deg); }
.digital-visual__notch { position: absolute; top: 7px; left: 50%; width: 58px; height: 9px; transform: translateX(-50%); background: #1c3a49; border-radius: 0 0 7px 7px; }
.digital-visual__badge { font-size: 7px; font-weight: 750; letter-spacing: .09em; color: #668282; }
.digital-visual__avatar { width: 62px; height: 62px; border-radius: 50%; background: var(--sand); display: grid; place-items: center; color: var(--ink); font-family: Georgia, serif; font-size: 34px; font-style: italic; }
.digital-visual__phone strong { font-size: 12px; margin-top: 6px; }
.digital-visual__phone small { color: #708890; font-size: 9px; }
.digital-visual__button { color: white; background: var(--ink); border-radius: 5px; width: 100%; padding: 11px 5px; text-align: center; font-size: 10px; font-weight: 750; margin-top: 8px; }
.digital-visual__tag { width: 108px; height: 69px; display: flex; align-items: center; justify-content: space-around; position: absolute; z-index: 1; transform: rotate(-12deg) translate(138px, 70px); background: #d0e4dc; border-radius: 8px; border: 5px solid #e9f3ed; box-shadow: 12px 20px 28px #081e2999; color: var(--ink); font-size: 20px; font-weight: 850; }
.digital-visual__tag span { font-weight: 400; font-size: 15px; letter-spacing: -3px; }
.home-page .digital-teaser { --ink: #142b39; --ink-deep: #10232f; --ink-soft: #45616c; --accent: #b9896f; --sand: #e8dbd0; --paper: #fbfaf8; --white: #fff; --surface: #f4f4f1; --line: #e4e8e7; --teal: #347b80; }

/* 11  FORMULARIO DE CONSULTAS ================================= */
.inquiry { background: #f3f6f5; }
.inquiry__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 10%; }
.inquiry__intro { padding-top: 18px; }
.inquiry h2 { font-size: clamp(33px, 3.2vw, 44px); }
.inquiry__intro > p:not(.eyebrow) { color: #6d8086; line-height: 1.85; font-size: 14px; max-width: 490px; }
.inquiry__note { border-left: 3px solid #9cbbb7; display: flex; gap: 12px; padding: 10px 13px; color: #738991; font-size: 12px; line-height: 1.6; margin-top: 25px; max-width: 500px; }
.inquiry__note > span:first-child { border: 1px solid #a5b9bd; width: 19px; height: 19px; display: grid; place-items: center; border-radius: 50%; font-family: Georgia,serif; font-size: 12px; flex-shrink: 0; }
.inquiry-form { background: white; border: 1px solid var(--line); border-radius: 13px; box-shadow: 0 15px 40px #122b3610; padding: 30px; display: flex; flex-direction: column; }
.inquiry-form label { font-size: 12px; font-weight: 750; margin: 0 0 9px; }
.inquiry-form input, .inquiry-form select, .inquiry-form textarea { padding: 13px 14px; width: 100%; border: 1px solid #ccd7d8; border-radius: 6px; color: var(--ink); background: white; font-size: 13px; margin-bottom: 17px; }
.inquiry-form textarea { resize: vertical; min-height: 90px; }
.inquiry-form input::placeholder, .inquiry-form textarea::placeholder { color: #9aa7ab; }
.inquiry-form .btn { align-self: flex-start; }
.form-feedback { min-height: 18px; margin: 12px 0 0; color: #2f6c68; font-size: 12px; }
.home-page .inquiry { background: #F7F0E7; }

/* 12  PIE DE PÁGINA =========================================== */
.site-footer { background: var(--ink-deep); color: #e7eeee; }
.footer__content { display: flex; justify-content: space-between; gap: 40px; padding-block: 45px 33px; }
.home-page .brand--footer { display: inline-flex; align-items: center; gap: 10px; }
.home-page .brand--footer .brand__logo { width: 48px; height: 48px; object-fit: contain; display: block; flex-shrink: 0; }
.footer__content p { color: #eff2f3; margin: 14px 0 0; font-size: 12px; }
.footer__links { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 26px; }
.footer__links a { color: #d1e1e5; font-size: 12px; }
.footer__bottom { display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid #ffffff25; padding-block: 18px 23px; color: #8eacb6; font-size: 11px; }
.home-page .brand--footer .brand__name { color: #FFFFFF; }
/* Logotipo y nombre del pie de página de Arsai Digital. */
.digital-page .brand--footer .brand__logo { width: 48px; height: 48px; object-fit: contain; flex-shrink: 0; }
.digital-page .brand--footer .brand__name { color: #fff; }

/* 13  ARSAI DIGITAL — PORTADA, PRODUCTOS Y PASOS ============== */
.digital-hero { color: white; background: radial-gradient(ellipse at 85% 80%,#315b65 0%,transparent 55%),linear-gradient(125deg,#102833,#163d4a); overflow: hidden; }
.digital-hero__grid { min-height: 457px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 50px; align-items: center; padding-block: 55px; }
.digital-hero h1 { font-size: clamp(39px, 5vw, 65px); line-height: 1.08; letter-spacing: -.045em; margin-bottom: 25px; }
.digital-hero h1 span { color: #a5c9c6; }
.digital-hero p:not(.eyebrow) { color: #c1d3d8; font-size: 15px; line-height: 1.8; max-width: 525px; }
.digital-hero__art { display: grid; place-items: center; min-height: 340px; }
.nfc-large-card { width: min(340px, 100%); aspect-ratio: 1.6; padding: 26px; color: #e8f4f3; background: linear-gradient(140deg,#557e80,#203d4b); border: 1px solid #97b0b744; box-shadow: 24px 30px 40px #071b2b90; border-radius: 14px; display: flex; flex-direction: column; transform: rotate(-10deg); position: relative; }
.nfc-large-card__brand { font-size: 11px; letter-spacing: .14em; font-weight: 800; }
.nfc-large-card__chip { font-size: 27px; margin: 24px 0 -16px; color: #c8d7d1; }
.nfc-large-card__signal { position: absolute; right: 30px; top: 70px; letter-spacing: -4px; }
.nfc-large-card strong { margin-top: auto; font-family: Georgia,serif; font-size: 23px; line-height: 1.1; font-weight: 400; }
.nfc-large-card small { font-size: 8px; letter-spacing: .15em; align-self: flex-end; }
.digital-product-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.digital-product { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.digital-product__art { height: 241px; display: grid; place-items: center; overflow: hidden; }
.digital-product__art--card { background: #dce7e4; }
.digital-product__art--sticker { background: #e8e5db; }
.digital-product__art--stand { background: #dce1e5; }
.digital-product__copy { padding: 22px 21px 25px; }
.nfc-mini-card { width: 207px; height: 127px; background: linear-gradient(140deg,#1c4954,#658784); color: white; border-radius: 10px; transform: rotate(-11deg); box-shadow: 13px 22px 28px #1d3d4961; padding: 19px 17px; display: flex; flex-direction: column; justify-content: space-between; }
.nfc-mini-card > span { font-size: 9px; font-weight: 850; letter-spacing: .12em; }
.nfc-mini-card > strong { font-family: Georgia,serif; font-size: 36px; font-style: italic; font-weight: 400; }
.nfc-mini-card > small { align-self: flex-end; font-size: 10px; }
.nfc-sticker { width: 139px; height: 139px; border-radius: 50%; background: #f7faf8; box-shadow: 7px 14px 20px #53615935; border: 8px solid #94b9b4; display: flex; align-items: center; justify-content: center; color: var(--ink); font-size: 23px; font-weight: 850; gap: 7px; transform: rotate(-10deg); }
.nfc-sticker span { font-size: 16px; letter-spacing: -4px; }
.nfc-stand { width: 151px; height: 181px; border-radius: 5px 5px 13px 13px; background: linear-gradient(145deg,#fff,#f0f4f3); border-bottom: 13px solid #91a9ad; box-shadow: 8px 13px 22px #314d5661; display: flex; align-items: center; flex-direction: column; padding: 17px 12px; transform: rotate(5deg); gap: 10px; }
.nfc-stand > span { color: var(--ink); font-size: 10px; font-weight: 850; }
.nfc-stand__qr { font-family: monospace; font-size: 62px; line-height: 1; color: var(--ink); }
.nfc-stand small { text-align: center; font-size: 7px; font-weight: 750; line-height: 1.5; }
.how-it-works { background: #f6f8f7; }
.steps-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.steps-grid > div { border-top: 2px solid #b8c9c8; padding: 22px 12px 10px 0; }
.steps-grid span { display: block; color: #a7806e; font-size: 12px; font-weight: 850; margin-bottom: 17px; }
.steps-grid h3 { font-size: 18px; letter-spacing: -.02em; margin-bottom: 10px; }
.steps-grid p { color: #71868a; font-size: 13px; line-height: 1.7; }
.demo-banner { margin-top: 60px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border: 1px solid #dbe6e5; background: white; border-radius: 12px; padding: 26px 28px; }
.demo-banner h3 { font-size: 20px; letter-spacing: -.02em; margin-bottom: 7px; }
.demo-banner p { color: #71868a; font-size: 13px; margin-bottom: 0; }

/* 14  TARJETA VIRTUAL — DEMOSTRACIÓN ========================== */
.card-page { background: #edf2f1; min-height: 100vh; }
.profile-topbar { display: flex; align-items: center; justify-content: space-between; min-height: 76px; background: white; border-bottom: 1px solid var(--line); padding: 15px max(22px,calc((100vw - 1180px)/2)); gap: 10px; }
.profile-topbar > span { font-size: 10px; font-weight: 800; color: #7e9498; letter-spacing: .16em; }
.profile-layout { max-width: 490px; margin: 45px auto 30px; background: white; border: 1px solid #dce5e4; border-radius: 17px; overflow: hidden; box-shadow: var(--shadow); }
.profile-banner { height: 140px; display: flex; justify-content: space-between; align-items: flex-start; padding: 26px; background: radial-gradient(circle at 80% -20%,#557e81,transparent 58%),var(--ink); color: white; }
.profile-banner span:first-child { font-size: 9px; letter-spacing: .16em; font-weight: 800; color: #d6e8ea; }
.profile-banner span:last-child { font-family: Georgia,serif; font-size: 70px; line-height: .9; font-style: italic; }
.profile-main { position: relative; text-align: center; padding: 0 32px 32px; }
.profile-avatar { width: 100px; height: 100px; border: 6px solid white; border-radius: 50%; background: #e9dfd7; color: #856858; display: grid; place-items: center; font-size: 30px; font-weight: 800; margin: -50px auto 21px; box-shadow: 0 4px 12px #21374017; }
.profile-label { font-size: 9px; font-weight: 850; letter-spacing: .16em; color: #a07b66; margin-bottom: 10px; }
.profile-main h1 { font-size: clamp(24px,5vw,31px); letter-spacing: -.04em; margin-bottom: 6px; }
.profile-role { color: #3f6068; font-size: 14px; margin-bottom: 4px; }
.profile-org { color: #91a1a5; font-size: 12px; margin-bottom: 20px; }
.profile-description { color: #657b81; font-size: 13px; line-height: 1.75; max-width: 350px; margin: 0 auto 22px; }
.profile-save { display: flex; width: 100%; }
.profile-status { margin: 10px 0 0; color: #35716c; font-size: 11px; line-height: 1.5; }
.profile-status:empty { display: none; }
.profile-links { display: grid; gap: 10px; margin-top: 21px; }
.profile-link { text-align: left; border: 1px solid #dfe8e8; border-radius: 7px; color: var(--ink); display: flex; gap: 12px; align-items: center; padding: 12px; font-size: 13px; font-weight: 700; transition: background-color .2s; }
.profile-link:hover { background: #f3f8f7; }
.profile-link__icon { background: #edf4f1; color: #477d79; display: grid; place-items: center; width: 33px; height: 33px; flex-shrink: 0; border-radius: 6px; font-size: 19px; }
.profile-link__arrow { margin-left: auto; font-size: 15px; color: #91a5a8; }
.profile-info { padding: 25px 32px; border-top: 1px solid #edf1f1; }
.profile-info h2 { font-size: 15px; margin-bottom: 18px; }
.profile-info dl { margin: 0; }
.profile-info dl > div { display: flex; justify-content: space-between; gap: 15px; padding: 11px 0; border-bottom: 1px solid #eff1f1; font-size: 12px; }
.profile-info dl > div:last-child { border-bottom: 0; }
.profile-info dt { color: #86979d; }
.profile-info dd { margin: 0; font-weight: 700; text-align: right; }
.profile-footnote { text-align: center; color: #91a2a7; padding: 14px 20px 21px; font-size: 10px; }
.profile-footer { text-align: center; padding: 0 20px 35px; color: #718b91; font-size: 11px; }
.profile-footer a { font-weight: 800; color: #296875; }

/* 15  DISEÑO RESPONSIVO Y ACCESIBILIDAD ============================== */

@media (max-width: 1080px) {
  .main-nav { gap: 17px; }
  .main-nav a { font-size: 12px; }
  .hero__grid { gap: 4%; }
  .product-grid { gap: 12px; }
  .product-card__body { padding: 18px 13px; }
  .section { padding: 72px 0; }
}

@media (max-width: 830px) {
  .container { width: min(calc(100% - 40px), var(--max)); }
  .nav-wrap { min-height: 72px; }
  .menu-toggle { display: block; }
  .main-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: #fff; box-shadow: 0 18px 25px #1f34421e; border-top: 1px solid var(--line); padding: 10px 20px 18px; }
  .main-nav.is-open { display: flex; }
  .main-nav a { padding: 15px 12px; font-size: 14px; }
  .main-nav a.nav-cta { margin-top: 6px; text-align: center; }
  .hero__grid { grid-template-columns: 1fr; padding-block: 51px 36px; gap: 24px; }
  .hero__copy { padding: 0; }
  .hero__showcase { max-width: 610px; width: 100%; margin-inline: auto; height: 325px; }
  .product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
  .product-card__body { min-height: 142px; padding: 20px; }
  .faith-grid { gap: 12px; }
  .faith-card__text { padding: 18px 14px; }
  .digital-teaser__grid { gap: 2%; grid-template-columns: 1.1fr .9fr; }
  .inquiry__grid { gap: 5%; }
  .digital-hero__grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  .digital-product-grid { gap: 12px; }
  .digital-product__copy { padding: 18px 14px; }
}

@media (max-width: 600px) {
  .home-page .brand__logo { width: 44px; height: 44px; }
  .home-page .brand--footer .brand__logo { width: 42px; height: 42px; }
  html { scroll-padding-top: 78px; }
  .container { width: min(calc(100% - 32px), var(--max)); }
  .topbar__inner { justify-content: center; }
  .topbar__inner span:last-child { display: none; }
  .brand__name { font-size: 20px; }
  .brand__symbol { width: 34px; height: 34px; }
  .hero__grid { padding-block: 35px 23px; }
  .hero h1 { font-size: clamp(35px, 9vw, 45px); }
  .hero__description { font-size: 14px; line-height: 1.7; }
  .hero__actions { align-items: stretch; flex-direction: column; }
  .hero__actions .btn { width: 100%; }
  .hero__showcase { height: 275px; }
  .showcase__book { padding: 35px 16px 17px; }
  .showcase__title { margin-top: 32px; font-size: 39px; }
  .showcase__small { font-size: 6px; }
  .showcase__card { font-size: 10px; padding: 13px; }
  .section { padding: 56px 0; }
  .section-heading { align-items: flex-start; margin-bottom: 23px; }
  .section-count { display: none; }
  .section-heading h2 { font-size: 29px; }
  .product-grid { gap: 12px; }
  .product-art { height: 164px; }
  .product-card__body { padding: 16px 13px; min-height: 160px; }
  .product-card h3, .faith-card h3 { font-size: 14px; }
  .product-card p, .faith-card p { font-size: 11px; }
  .faith-grid { grid-template-columns: 1fr; gap: 13px; }
  .faith-card { display: grid; grid-template-columns: 39% 61%; min-height: 157px; }
  .faith-art { height: auto; min-height: 157px; }
  .faith-art--book::before { transform: scale(.73) rotate(-13deg); }
  .faith-art--book > span { font-size: 20px; }
  .faith-art--book > small { display: none; }
  .little-book { transform: scale(.75) rotate(-12deg); margin-right: -24px; }
  .little-book--small { transform: scale(.8) rotate(15deg); margin-left: -39px; }
  .color-sheet { transform: scale(.78) rotate(8deg); }
  .faith-card__text { padding: 18px 15px; display: flex; flex-direction: column; justify-content: center; }
  .faith-card__text p { min-height: unset; }
  .faith-card__text .text-link { margin-top: 10px; }
  .digital-teaser__grid { grid-template-columns: 1fr; gap: 15px; }
  .digital-teaser h2 { font-size: 44px; }
  .digital-teaser__actions { gap: 19px; }
  .digital-visual { height: 272px; }
  .digital-visual__phone { transform: scale(.8) rotate(7deg); }
  .digital-visual__tag { transform: scale(.8) rotate(-12deg) translate(138px,70px); }
  .inquiry__grid { grid-template-columns: 1fr; gap: 22px; }
  .inquiry__intro { padding-top: 0; }
  .inquiry-form { padding: 22px; }
  .inquiry-form .btn { align-self: stretch; }
  .footer__content { flex-direction: column; gap: 28px; }
  .footer__links { gap: 16px 25px; }
  .footer__bottom { flex-wrap: wrap; }
  .digital-hero__grid { grid-template-columns: 1fr; gap: 5px; padding-block: 45px 20px; }
  .digital-hero h1 { font-size: 43px; }
  .digital-hero__art { min-height: 260px; }
  .nfc-large-card { width: 275px; }
  .digital-product-grid { grid-template-columns: 1fr; gap: 15px; }
  .digital-product { display: grid; grid-template-columns: 42% 58%; }
  .digital-product__art { height: 188px; }
  .nfc-mini-card { transform: scale(.66) rotate(-11deg); }
  .nfc-sticker { transform: scale(.7) rotate(-10deg); }
  .nfc-stand { transform: scale(.7) rotate(5deg); }
  .digital-product__copy { padding: 20px 14px; display: flex; flex-direction: column; justify-content: center; }
  .digital-product h3 { font-size: 14px; }
  .steps-grid { grid-template-columns: 1fr; gap: 0; }
  .steps-grid > div { padding: 16px 0 13px; }
  .steps-grid span { margin-bottom: 9px; }
  .steps-grid h3 { margin-bottom: 5px; }
  .steps-grid p { margin-bottom: 0; }
  .demo-banner { margin-top: 38px; padding: 22px; flex-direction: column; align-items: stretch; }
  .profile-topbar { padding: 14px 17px; }
  .profile-topbar .brand__name { font-size: 18px; }
  .profile-topbar > span { display: none; }
  .profile-layout { margin: 15px 12px 24px; }
  .profile-main { padding-inline: 24px; }
  .profile-info { padding-inline: 24px; }
  .home-page .product-art--agenda { height: 190px; min-height: 190px; }
  .home-page .product-art--agenda::before { top: 47px; bottom: 8px; left: 8px; right: 8px; }
  .home-page .product-art--agenda .catalogo-imagen { width: 84%; height: 170px; transform: translateY(-3px) rotate(-1deg); }
  .home-page .product-card:hover .product-art--agenda .catalogo-imagen { transform: translateY(-9px) rotate(-1deg) scale(1.02); }
  .home-page .product-art--cards { height: 190px; min-height: 190px; }
  .home-page .product-art--cards::before { top: 54px; bottom: 12px; left: 8px; right: 8px; }
  .home-page .product-art--cards::after { bottom: 24px; height: 12px; }
  .home-page .product-art--cards .catalogo-imagen--tarjetas { width: 110%; transform: translateY(-20px); }
  .home-page .product-card--tarjetas:hover .catalogo-imagen--tarjetas { transform: translateY(-27px) scale(1.02); }
  .home-page .product-art--covers { height: 190px; min-height: 190px; }
  .home-page .product-art--covers::before { top: 50px; bottom: 10px; left: 8px; right: 8px; }
  .home-page .product-art--covers::after { bottom: 10px; height: 12px; }
  .home-page .product-art--covers .catalogo-imagen--covers { width: 90%; height: 175px; }
  .home-page .product-card:hover .product-art--covers .catalogo-imagen--covers { transform: translateY(-8px) scale(1.02); }
  .home-page .product-art--calendar { height: 190px; min-height: 190px; }
  .home-page .product-art--calendar::before { top: 50px; bottom: 10px; left: 8px; right: 8px; }
  .home-page .product-art--calendar::after { bottom: 12px; height: 12px; }
  .home-page .product-art--calendar .catalogo-imagen--calendar { width: 90%; height: 175px; transform: translateY(-5px); }
  .home-page .product-card:hover .catalogo-imagen--calendar { transform: translateY(-12px) scale(1.02); }
  .digital-page .brand__logo { width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}