{"id":834,"date":"2026-07-28T16:49:17","date_gmt":"2026-07-28T16:49:17","guid":{"rendered":"https:\/\/teacherjm.com\/epja\/?page_id=834"},"modified":"2026-07-29T04:52:27","modified_gmt":"2026-07-29T04:52:27","slug":"834-2","status":"publish","type":"page","link":"https:\/\/teacherjm.com\/epja\/834-2\/","title":{"rendered":""},"content":{"rendered":"\n<style>\n    \/* Contenedor Grid a 2 columnas para tarjetas anchas *\/\n    .grid-bloques-teacher {\n        display: grid;\n        grid-template-columns: repeat(2, 1fr);\n        gap: 3.5rem; \n        max-width: 2200px;\n        width: 100%;\n        padding: 1.5rem;\n        box-sizing: border-box;\n    }\n\n    .bloque-wrapper {\n        perspective: 1500px;\n        min-height: 380px; \n        display: flex;\n        box-sizing: border-box;\n    }\n\n    .bloque {\n        position: relative;\n        width: 100%;\n        min-height: 380px;\n        transform: rotateY(0deg);\n        transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);\n        transform-style: preserve-3d;\n        border-radius: 28px;\n        box-shadow: 0 12px 35px rgba(0, 0, 0, 0.08);\n        cursor: pointer;\n    }\n\n    \/* Activadores del giro *\/\n    .bloque-wrapper:hover .bloque,\n    .bloque-wrapper.is-flipped .bloque {\n        transform: rotateY(180deg);\n    }\n\n    .cara {\n        position: absolute;\n        width: 100%;\n        height: 100%;\n        backface-visibility: hidden;\n        -webkit-backface-visibility: hidden;\n        border-radius: 28px;\n        padding: 2.5rem 3rem; \n        display: flex;\n        flex-direction: column;\n        align-items: flex-start;\n        border: 1px solid rgba(214, 226, 252, 0.5);\n        background: #ffffff;\n        box-sizing: border-box;\n        overflow: hidden;\n    }\n\n    .cara-back {\n        transform: rotateY(180deg);\n        background: #fafcff;\n        border-color: #c8daf8;\n    }\n\n    .cara .numero {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        background: #eef4ff;\n        color: #1a3b6b;\n        font-weight: 700;\n        font-size: 1.8rem;\n        width: 65px;\n        height: 65px;\n        border-radius: 20px;\n        margin-bottom: 1.2rem;\n    }\n\n    .cara h3 {\n        font-family: inherit;\n        font-size: 2rem;\n        font-weight: 600;\n        color: #0b1f38;\n        margin: 0 0 0.8rem 0;\n        line-height: 1.2;\n    }\n\n    .cara p {\n        font-family: inherit;\n        font-size: 1.25rem;\n        line-height: 1.6;\n        color: #334d6e;\n        margin: 0 0 1.5rem 0;\n        flex: 1;\n    }\n\n    .cara .separador {\n        width: 100%;\n        height: 2px;\n        background: linear-gradient(to right, #dde7fc, transparent);\n        margin-bottom: 1.2rem;\n        border: 0;\n    }\n\n    .cara .pie {\n        font-size: 1rem;\n        font-weight: 600;\n        text-transform: uppercase;\n        letter-spacing: 0.05em;\n        color: #3d5f8a;\n        background: #f0f5fe;\n        padding: 0.4rem 1.2rem;\n        border-radius: 30px;\n        border: 1px solid #d2e0fb;\n    }\n\n    .cara-back .numero {\n        background: #e0ebff;\n        color: #10345e;\n    }\n\n    \/* Adaptaci\u00f3n responsiva pantallas medianas y m\u00f3viles *\/\n    @media (max-width: 1024px) {\n        .grid-bloques-teacher { gap: 2.5rem; padding: 1rem; }\n        .cara h3 { font-size: 1.7rem; }\n        .cara p { font-size: 1.1rem; }\n    }\n    @media (max-width: 768px) {\n        .grid-bloques-teacher { grid-template-columns: 1fr; }\n    }\n    @media (max-width: 480px) {\n        .bloque-wrapper, .bloque, .cara { min-height: 300px; }\n        .cara { padding: 1.5rem 1.2rem; }\n        .cara .numero { width: 50px; height: 50px; font-size: 1.4rem; }\n        .cara h3 { font-size: 1.4rem; }\n        .cara p { font-size: 1rem; }\n    }\n<\/style>\n<div class=\"grid-bloques-teacher\">\n    \n    <!-- TARJETA 1 -->\n    <div class=\"bloque-wrapper\" onclick=\"toggleTeacherCard(this)\">\n        <div class=\"bloque\">\n            <div class=\"cara cara-front\">\n                <div class=\"numero\">01<\/div>\n                <h3>WHAT<\/h3>\n                <div class=\"separador\"><\/div>\n                <p>Se utiliza en ingl\u00e9s para hacer preguntas sobre cosas, actividades o informaci\u00f3n general, y se traduce como &#8220;\u00bfqu\u00e9?&#8221;,&#8221;\u00bfcu\u00e0l?&#8221;  en espa\u00f1ol..<\/p>\n                <div class=\"pie\">Front<\/div>\n            <\/div>\n            <div class=\"cara cara-back\">\n                <div class=\"numero\">01<\/div>\n                <h4>* What is your favorite movie?<\/h4>\n                <h4>* What are you doing now?<\/h4>\n                <h4>* What time is it?<\/h4>\n                <div class=\"separador\"><\/div>\n                <p> .<\/p>\n                <div class=\"pie\">Back<\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <!-- TARJETA 2 -->\n    <div class=\"bloque-wrapper\" onclick=\"toggleTeacherCard(this)\">\n        <div class=\"bloque\">\n            <div class=\"cara cara-front\">\n                <div class=\"numero\">02<\/div>\n                <h3>WHO<\/h3>\n                <div class=\"separador\"><\/div>\n                <p>Se usa para referirnos a personas, ya sea en preguntas sobre su identidad o como pronombre relativo en oraciones que describen a alguien.<\/p>\n                <div class=\"pie\">Front<\/div>\n            <\/div>\n            <div class=\"cara cara-back\">\n                <div class=\"numero\">02<\/div>\n                <h4>* Who is your teacher of English? <\/h4>\n                <h4>* Who did you go to the cinema with yesterday? <\/h4>\n                <h4>* Who is your favourite film actor? <\/h4>\n                <div class=\"separador\"><\/div>\n                <p> .<\/p>\n                <div class=\"pie\">Back<\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <!-- TARJETA 3 -->\n    <div class=\"bloque-wrapper\" onclick=\"toggleTeacherCard(this)\">\n        <div class=\"bloque\">\n            <div class=\"cara cara-front\">\n                <div class=\"numero\">03<\/div>\n                <h3>WHEN<\/h3>\n                <div class=\"separador\"><\/div>\n                <p>Se usa para indicar el momento en que ocurre una acci\u00f3n, ya sea en preguntas o en oraciones afirmativas, y a menudo se\u00f1ala un evento puntual que puede interrumpir otra acci\u00f3n en progreso.<\/p>\n                <div class=\"pie\">Front<\/div>\n            <\/div>\n            <div class=\"cara cara-back\">\n                <div class=\"numero\">03<\/div>\n                <h4>* When is your birthday?<\/h4>\n                <h4>* When did you meet him in the party?<\/h4>\n                <h4>* When is our next class of Engish?<\/h4>\n                <div class=\"separador\"><\/div>\n                <p> .<\/p>\n                <div class=\"pie\">Back<\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <!-- TARJETA 4 -->\n    <div class=\"bloque-wrapper\" onclick=\"toggleTeacherCard(this)\">\n        <div class=\"bloque\">\n            <div class=\"cara cara-front\">\n                <div class=\"numero\">04<\/div>\n                <h3>WHY<\/h3>\n                <div class=\"separador\"><\/div>\n                <p>Se usa para preguntar por la raz\u00f3n o el prop\u00f3sito de algo, tanto en preguntas directas como indirectas.<\/p>\n                <div class=\"pie\">Front<\/div>\n            <\/div>\n            <div class=\"cara cara-back\">\n                <div class=\"numero\">04<\/div>\n                <h4>* Why are you happy today?<\/h4>\n                <h4>* Why did you say it was raining?<\/h4>\n                <h4>* Why shoud I pay your bills?<\/h4>\n                <div class=\"separador\"><\/div>\n                <p> .<\/p>\n                <div class=\"pie\">Back<\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <!-- TARJETA 5 -->\n    <div class=\"bloque-wrapper\" onclick=\"toggleTeacherCard(this)\">\n        <div class=\"bloque\">\n            <div class=\"cara cara-front\">\n                <div class=\"numero\">05<\/div>\n                <h3>WHERE<\/h3>\n                <div class=\"separador\"><\/div>\n                <p>se utiliza para preguntar o indicar lugares, ya sea en preguntas directas, indirectas o como pronombre relativo que introduce informaci\u00f3n sobre un lugar.<\/p>\n                <div class=\"pie\">Front<\/div>\n            <\/div>\n            <div class=\"cara cara-back\">\n                <div class=\"numero\">05<\/div>\n                <h4>* Where do you live?<\/h4>\n                <h4>* Where is my cell phone?<\/h4>\n                <h4>* Where did you go yesterday?<\/h4>\n                <div class=\"separador\"><\/div>\n                <p> .<\/p>\n                <div class=\"pie\">Back<\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <!-- TARJETA 6 -->\n    <div class=\"bloque-wrapper\" onclick=\"toggleTeacherCard(this)\">\n        <div class=\"bloque\">\n            <div class=\"cara cara-front\">\n                <div class=\"numero\">06<\/div>\n                <h3>WHICH<\/h3>\n                <div class=\"separador\"><\/div>\n                <p>Significa \u00abcu\u00e1l\u00bb, \u00abcu\u00e1les\u00bb o \u00abque\u00bb. Se usa principalmente para elegir entre un grupo peque\u00f1o de cosas o para unir ideas en una frase.<\/p>\n                <div class=\"pie\">Front<\/div>\n            <\/div>\n            <div class=\"cara cara-back\">\n                <div class=\"numero\">06<\/div>\n                <h4>* Which color do you prefer, blue or red?<\/h4>\n                <h4>* Which of these books have you read?<\/h4>\n                <h4>* Which bus goes to the city center?<\/h4>\n                <div class=\"separador\"><\/div>\n                <p> .<\/p>\n                <div class=\"pie\">Back<\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n<\/div>\n<script>\n    function toggleTeacherCard(wrapper) {\n        if (wrapper) {\n            wrapper.classList.toggle('is-flipped');\n        }\n    }\n<\/script>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-right is-layout-flex wp-container-core-buttons-is-layout-0e28dbe1 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-text-align-center wp-element-button\" href=\"https:\/\/teacherjm.com\/epja\/899-2\/\">Next<\/a><\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>01 WHAT Se utiliza en ingl\u00e9s para hacer preguntas sobre cosas, actividades o informaci\u00f3n general, y se traduce como &#8220;\u00bfqu\u00e9?&#8221;,&#8221;\u00bfcu\u00e0l?&#8221; en espa\u00f1ol.. Front 01 * What is your favorite movie? * What are you doing now? * What time is it? . Back 02 WHO Se usa para referirnos a personas, ya sea en preguntas [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-834","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/teacherjm.com\/epja\/wp-json\/wp\/v2\/pages\/834","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/teacherjm.com\/epja\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/teacherjm.com\/epja\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/teacherjm.com\/epja\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/teacherjm.com\/epja\/wp-json\/wp\/v2\/comments?post=834"}],"version-history":[{"count":55,"href":"https:\/\/teacherjm.com\/epja\/wp-json\/wp\/v2\/pages\/834\/revisions"}],"predecessor-version":[{"id":909,"href":"https:\/\/teacherjm.com\/epja\/wp-json\/wp\/v2\/pages\/834\/revisions\/909"}],"wp:attachment":[{"href":"https:\/\/teacherjm.com\/epja\/wp-json\/wp\/v2\/media?parent=834"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}